问题
I'm hoping someone can help.
I'm recently watched a video on responsive web design on a well know site.
I'm puzzled by the method taken by the tutor. He basically creates three styles sheets (large / medium / small) and in each stylesheet he gives the PX widths of DIVS and swaps images where necessary.
Surely, this method is flawed , he could just use percentages for fluid layout instead of different styles sheets called via media queries??
Is there any advantages to his method?
many thanks,
回答1:
There is a distinction between a flexible design and a responsive design.
According to some of the books that I read, you can make a layout flexible by using % length values, so the layout adapts to the exact dimensions of the viewport's width.
If you build a responsive design using media queries, you can make a design that uses absolute lengths (pixels) and adjust those hard-coded values to differ according to the screen size limits defined in your media queries.
So, a flexible design may work well as a responsive design, and a responsive design may be based on a fixed-width layout.
Needless to say, the approach that you use will depend on the design that you are trying to build and how it must work in various devices.
The author of your tutorial is not necessarily wrong, but their approach may not be the most efficient approach to building a responsive design. In some cases, if you use % values, you may achieve your design with a much more concise CSS stylesheet.
回答2:
You can use both fluid layout and responsive queries together - responsive media queries take up where fluidity no longer manages.
For instance, content in four columns, with column widths in percentages, will shrink the column size for smaller screen widths. But there comes a point where the columns are so narrow they are holding just one or two words per line, which looks naff, and is hard to read, and causes content to overflow its containers. By the time it gets down to mobile size everything is far too small to read at all.
To solve this, you can write media queries to relocate one or more of the columns elsewhere - queries allow you to completely rewrite a page, not simply shrink it. And, unlike the use of floats (often used for images) where only the end one drops as things get smaller, with media queries you can decide which is the most logical div or column to move, and where to relocate it to (or even to hide it completely).
It's good also to get away from using PX units everywhere, especially to keep text content on our pages accessible by poor-sighted people. Note that the point where text is just one or two words per line comes much earlier, at much wider column widths, if the user is running with a higher text zoom (as I often have to do). I wrote about this recently on my blog at http://www.enigmaticweb.com/index.php/blog/accessibleResponsiveness, which you might find useful. The answer is to use EM units for containers holding text, and for media query breakpoints (if you are just starting out with media queries, its good to get into that habit right at the start). Divs with both fixed height and width are especially to be avoided - as soon as the user zooms the text size, everything bursts out of the div and defaces other stuff!
By the way it is not usually good to do as that tutor you mention and put your media queries in multiple stylesheets (he was probably only trying to illustrate the separate nature of the queries) - that increases load times (separate HTTP accesses) which is especially bad news for mobiles.
I hope this helps. Huge numbers of commercial sites are being made responsive now, to cater for mobile phones. It's the way the world is going.
回答3:
In my early years of learning how to code with a graphics and design background. I found it rather awkward to use pixels over percentage. It's this simple if the product you are designing is for a specific screen size/sizes then and only then could adapt to using pixels ( which in any case % would still make your work easier). When coding we should keep one thing in mind i.e. "aesthetics". You want your content to be fluid, adaptive kindly stick to % and save time.
来源：https://stackoverflow.com/questions/26243999/responsive-design-pixels-vs-percentages