Responsive Web Design)

Self-conversion blog http://blog.leeluolee.name/

Responsive web design is an emerging web design method. It is based on the media query statement of css3, so that the web page can adapt to different devices. The definition of a foreign authoritative website is as follows:

Responsive Web DesignIs the approach that suggests that design and development shoshould respond to the user's behavior and environment based on screen size, platform and orientation.

In a word, the webpage will be automatically re-laid with the size of your device and the size of your window scaled. It sounds a bit difficult, right? The most recent example is my blog. here you can do a few simple tests to understand responsive web design, of course, I have not done well ):

1. Enter a page and drag the maximum size (preferably above 1440) below 320px to view the screen changes.
2. If possible, use the horizontal and vertical modes of your iPad and iPhone to test them separately.
3. Repeat Step 1 in the ancient Web browser (ie <9), and the Xiami did not happen, just a common fixed-width 980px web page.

You should be able to see that the layout and even the font are starting to change with the screen, and the X scroll axis never appears, mobile device landscape or portrait screen, but this is not simply achieved by setting the percentage width. In my opinion, the biggest advantage of this design method over the General Fluid layout is to ensure the adaptive width (of course, it is more adaptive and elegant ).Use a grid system to design webpages !!!This is a common Fluid layout in China. (In fact, responsive web design has become very popular in foreign countries, but almost no information is found in China .).

Of course, The only weakness is that media query does not support ie <9. mediaqueries-js can be used to make all browsers support media query. I did not do this. I have always been keen on treating differences. Of course, I will not deprive you of your browsing right. (My blog does not use a picture, and it is all done by css3, so the differences in appearance can be quite large .).

 

Another question that has to be consideredIf the layout is designed based on the fixed width grid for each screen width, the final result will be very bad, because the font changes with the specific device (if the Font does not change, some fine screens, such as the fonts under the iPad, will be very small). The fixed grid system can easily design the content area to be too wide or too narrow. Here I use the IA Processing Method for reference, determine the width of the grid based on the font size of the body, which can save a considerable amount of CSS code.

My blog uses a 7-grid system (which is a prime number... In the case of a large website or a wrong demonstration, but it has a miraculous effect in the design of personal blogs), the grid width and grid distance are standard (that is, 9em and 1em ), the display size is 14px,

The solid-width display of 980px is used when the screen is between 1025 and 1440 (most PCs in China.

When the screen size exceeds 1440, the font size is 18px, the width is 1260, And the margin is also quite empty, so there is no abrupt feeling.

When the screen is smaller than 1025, I set the width to 39em, that is, 624px. I leave it blank a little more, but considering the need to optimize the display of the mobile HD screen, and 1024 of the displays do not occupy a large share at present.

When I set the font to 20 PX and 18 PX on the horizontal and vertical screen of the iPad, the computation will not cause horizontal overflow.

Then, we can process <640px <480px <320px separately.

After this design, you will find that your CSS code volume is very large ~ My blog CSS size has reached the size of the first 24 KB before compression (of course, the main reason is that a large number of css3 attributes involve branches such as-0--WebKit--moz )... But everything is worth it.

To sum up, my summary of responsive web design is:

1. Design details such as font-family and font-Size Based on device size only.
2. Based on the screen width scaling, the layout design step is in collaboration with the first step.
3. Use a body-based font-size grid system.
4. Consider some precision screen devices, such as the font size of the iPad, and enlarge the font of the large screen (> 1440 ).

 

Reference resources

1. Responsive web design: what it is and how to use it
2. Responsive Web Design
3. CSS media query for mobile is fool's gold
4. Examples of flexible layouts with css3 media queries