Digress
I originally wanted to write a Scaffolding blog post on Bootstrap. However, I don't know much about responsive Web design, So I first had this blog post.
Blog original address: http://www.cnblogs.com/yhuang/archive/2012/03/29/responsive_web_design.html
Directory
Preface
What is Responsive Web design )?
Application of responsive Web Design
Media queries & Viewport
@ Media queries
Viewports
Width = device-width
Initial-scale = 1.0, maximum-scale = 1.0
Width = <actual width>
@ Media all and (device-width: 480)
Intermediate size
Recommended settings
References
Preface
Nowadays, more and more mobile devices are used, and the Website of the mobile version is becoming more and more important. However, mobile devices have different sizes and different screen resolutions. We cannot be BlackBerry, iPhone, iPad and so on. Therefore, the Website design we need must meet the requirements of multiple devices and be compatible with all screen resolutions. This design is called responsive Web design.
What is Responsive Web design )?
Responsive Web design is a design that allows Web design and development to respond to user behaviors and environments based on screen sizes, platforms, and directions. It includes flexible mesh and layout, images and media queries that intelligently use CSS. When a user switches from Laptop to iPad, the website should be able to automatically Switch CSS rules to adapt to Device resolution, image size, and script execution. In other words, responsive Web design is a technology that automatically responds to user preferences. This will once and for all meet the needs of different design and development for each newly listed mobile terminal.
It should be noted that the responsive Web design is not only an image with adjustable screen resolution and automatic size adjustment, but also a Website design method with brand new ideas.
Application of responsive Web Design
As more and more devices come, there are various screen resolutions, definitions, and directions. Every day, devices with new screen sizes are being developed. Each device can have different sizes, functions, and even colors. Some are horizontal, some are vertical, and even some are completely square. :
Lists some of the most common ones: So if you want to make your customers satisfied, you must enable your website to automatically adjust and fit the screens of the above devices. For example, you should customize different layout structures for different devices: custom layout is the same. Sometimes, you can display or hide some content as needed: the displayed or hidden content is obvious, we cannot customize a page for each device. So how should we deal with this situation?
Media queries & Viewport the key to solving the problem is Media queries and Viewports. The following content is about how to best use Media queries and Viewports. However, I will not go into detail on how to enhance the response. If you are interested, you can refer to the last part of this blog post: "reference article ".
As a web designer or front-end developer, we hope that our web pages can easily adapt to different devices and screen sizes, regardless of whether our users are using 21 "desktop monitors, 13" laptops, 10 "iPad or a smaller smartphone. The responsive webpage design uses @ media queries to change the page layout based on the browser width and CSS. We can use the following CSS:
/* Default wide-screen styles */
@media all and (max-width: 1024px) {
/* styles for narrow desktop browsers and iPad landscape */
}
@media all and (max-width: 768px) {
/* styles for narrower desktop browsers and iPad portrait */
}
@media all and (max-width: 480px) {
/* styles for iPhone/Android landscape (and really narrow browser windows) */
}
@media all and (max-width: 320px) {
/* styles for iPhone/Android portrait */
}
@media all and (max-width: 240px) {
/* styles for smaller devices */
}
Yes, we can set a smaller width or an intermediate size. I will discuss it later. CSS media queries is very powerful and complex. I don't want to discuss it too much here, because the above Code is sufficient for responsive Web design. For more details about Media Queries, see references.
Now, when we adjust the size of our browser, the above Code can be done very well. However, this does not meet the requirements of mobile browsers. The reason is that mobile browsers (iPhone/Safari, Android/Chrome, and Fennec) will default the page to be designed for wide screens, so it is reduced to adapt to small screens. This indicates that the above Code is not suitable for mobile browsers because devices cannot identify the correct width. Solution: Use the viewport meta tag provided by Apple in the document header and combine it with @ media queries:
<meta name="viewport" content="...">
In the above Code, content is empty, because I think it is necessary to give it in detail, instead of directly giving it out, so that we can remember it more clearly and know what should be entered in content, and why.
We can see that many websites recommend setting the content attribute value to width = device-width. This is equivalent to telling the browser to assume that the page width is the device width. Unfortunately, the assumption is correct only when the device is portrait. When we rotate the device horizontally, the device-width is still the same as the vertical (for example, 320px), which means that even if we design the page to adapt to a 480px horizontal device, it will still return the 320px effect.
I tried to use orientation in media query to solve this problem, but orientation does not really tell us the actual device width, because it only tells us whether the width of the device is greater than or less than the height of the device. As some people have pointed out, this is irrelevant because most web pages tend to scroll vertically.
If the style of our page is the same in the vertical and horizontal devices, we can use width = device-width, note that this is the only way to tell android devices to use the device width.
The initial-scale = 1 setting tells the browser not to scale the page during page initialization. Solved the page scaling problem when no viewport is used.But there are still bugs. When we convert the mobile device from portrait to landscape, you will find this problem. This is because
Initial-scale only works after the page is fully loaded. In the process of converting a mobile device from portrait to landscape, the browser will think that the page remains unchanged, but the scales will be set to 1.5, in order to adapt the 320px page to PX. However, because we have set the width of 480px in @ media queries, the page CSS rules will also adapt to the width of 480px. The result is that the page CSS rules are applicable to 1.5 PX, And the scale is also. ThisResults are not terrible, but not desirable. To solve this bug, we can add the maximum-scale = 1 setting. Its function is to prevent page enlargement during rotation, but it also brings a more serious problem: it also prevents users from manually enlarging or downgrading the page. Similarly
user-scalable=noSetting also prevents users from scaling the page. Therefore, do not use the preceding two settings.
Cannot solve this bug? First, this bug is only at the display level, and the consequences are not serious at all, because it is proportional even if the page is scaled automatically.
Some people suggest using a specific width in the viewport and design the page according to the width. This setting is feasible if you can write pages for each type of device, but we need to understand that it is not a responsive design. When printing, it is necessary to use a fixed width layout, but our web pages should adapt to various user-style devices. In short, do not use this method.
This is a media query, not an option in the viewport label. I have seen this code in many places, but I don't think it is a good practice. Why? According to CSS3's description of media queries, device-width indicates the width of the output device surface rendering in media queries. For continuous media, device-width indicates the screen width. For paged media, device-width indicates the page size width. Taking continuous media as an example, device-width is the width of the device screen. Unless the browser is maximized, it is always greater than the width of the viewport.
Tests show that most desktop browsers treat device-width and width as synonyms. Mobile browsers may be confused. In the viewport label, device-width is equal to the width of the device only in the vertical direction. For example, for a 320*480 device, device-width is always 320px regardless of the direction. However, for CSS media queries, device-width is based on the width of the screen in the current direction.
If you must use this method, use it with orientation. But do not use max-device-width and min-device-width, because it is better to use max-width and min-width. You must also note that the width of the new device model may change.
As mentioned above, we can design pages for any number of width values. The most important thing is to test them in browsers with different widths. It is the easiest way to test by adjusting the size of the window browser. As the width of the design page becomes smaller and smaller, we can remove (Display: none;) unimportant content, such as footer, sidebars, and menu, to keep enough space for the main content. Our website may need a layout that can run well on all width screens. It may only need two or three la S. This is very easy to design and test, so there is no reason not to do it.
Finally, I recommend the following practices:
- Use the viewport label
- Use media queries to select the CSS that best fits the page size
- In the viewport label, use width = device-width, initial-scale = 1, or use width = device-width separately.
- Do not use maximum-scale = 1 and user-scalable = no
- Do not use width = <specific width>
- Do not use @ media all and (*-device-width: xxx)
References
- Ethan Marcotte. 2010. Responsive Web Design. InList A Apart #306. ISSN: 1534-0295.
- Jeremy Keith. 2010. Responsive Enhancement. InAdactio.
- Kayla Knight. 2011. Responsive Web Design: What It Is and How To Use It. InSmashing Magazine.
- Webkit based desktop browsers re-render the page correctly as you resize the browser, however they have a minimum width of your PX (on MacOSX) and I was unable to shrink the browser below this. firefox 4 re-renders the page correctly until the width gets too narrow to fit the navigation toolbar. at that point the viewport width stays fixed even if you shrink the browser. the page is re-rendered if you type something (anything) into the URL bar. opera 10/11 re-render correctly at all sizes.
- Peter Paul koch. 2010. A tale of two viewports-part two. InQuirksmode.
- Using the Viewport on Safari. InSafari Web Content Guide.
- The viewport meta tag. InSafari HTML Reference.
- MDC. 2010. Using the viewport meta tag to control layout on mobile browsers. InMozilla Developer Network.
- Peter Paul Koch. 2010. Combining meta viewport and media queries. InQuirksmode.
- Willison & Downe. Lanyrd.
- Lie et al. 2010. Media Queries.W3C Candidate Recommendation 27 July 2010.
- If you design your page for the narrow view and configure CT it to scale when rotated, then use width = device-width and nothing else. if, instead, you design your page for either width, then use width = device-width, initial-scale = 1. this is the only way to get the android browser to render a page with the intended width. mobile Safari will render the page exactly as if initial-scale = 1 were specified alone. you will still end up with the zoom on rotate bug.
- David Calhoun. 2010. The viewport upload AG (Mobile web part I ).
AC Milan vs. FC using one: Milan, y croire... ou pas
