I wanna to ask the following question about the design of any web application.
When maximizing ,, minimizing , zooming the browser ,, i note many problems happen to my web application design for example the horizontal menu like the one exists in SO site when minimizing the window the items of the menu in my website go down the other .. and other things make the site sucks and distracts the design .. how to make the design more flexible with the changes in monitor size , the preferences of the browser , maximizing ,and minimizing the browser ,, how to make the site design more flexible about all those issues .
Please any instructions , advice should i take care to reduce these errors.
- Use percentage based widths for dimensions of your page and elements rather than pixels
- Use em for your font sizes rather than px or pt
- Try not to use images for navigation or if you do, make them expandable using the sliding doors method - http://www.alistapart.com/articles/slidingdoors/
- Read up on liquid layouts - http://www.maxdesign.com.au/articles/liquid/ http://www.alistapart.com/articles/negativemargins/
A site that makes heavy use of float: and no width: values in its CSS will run into problems when people get crazy with the window sizes.
You can either nail everything in place by specifying width: px; all over your CSS, or you can go liquid and use width: %; for your objects. The former is considerably easier to pull off than the latter.
Try use something like Less Framework( http://lessframework.com/ )
Make sure you resize your browser when you visit the site!
来源：https://stackoverflow.com/questions/4733199/how-to-make-the-web-site-design-more-flexible