Liquid Layout: How to

If I mark all my divs in percent, they fi开发者_开发技巧ll up all the space nicely. I am facing 2 problems:

a) Image sizes: How do I define image sizes so that they do not become larger or smaller than wanted as the window resizes

b) Font sizes: How do I make the font size increase or decrease based on resolution - should this be done at all? (The problem I face is that the text becomes illegible at very high resolutions)

Please point me to a good reference on how to make liquid layouts.

Regarding point b) it is, IMHO, good practice to use relative font sizes, rather than absolute ones, so that the fonts are sized compared to the browsers base settings (I'm guessing, from your problem, that you are using point or px sizes, yes?). You have the heading tags, of course, but you also have the font-size CSS attribute and the ability to size fonts in % or ems. You have hit one good reason to use relative sizes - on high res monitors this can make absolute-sized fonts unreadable (I have seen, in the old days when 14" 800x600 monitors were standard, a website that rendered to about the size of a matchbox on a high-res 21" monitor). There also the issue of "politeness" and accessibility - the user may have set their browser base-font size larger or smaller because of personal preference and/or accessibility issues, and to override this to an arbitrary size doesn't seem, to me, to be a good idea.

have a read on the font-size section of this page: http://www.w3schools.com/css/css_font.asp

If you need some actual examples then please post a bit of your code and CSS.

Good article here http://www.kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

for a) I love using this

img {
    width:100%;
    max-width:400px;
}

then, if you need to, add one of the many javascript fixes for max width in older browsers.

I found a simple solution for your second question about font size.

b) Font sizes:

Using stylesheet calculator and properties like:

vh - viewport height

vw - viewport width.

Your font size will take same size on your view, but it can be unreadable if you don't handle small sizes layout.

For regular size: font-size: calc(.5vh + .8vw);

For large size: font-size: calc(5vh + 5vw);

Hope this might help you.