Design and production method of responsive web site

In the study of the response to the time, recorded some feelings, share, and hope that we can discuss with you. In conclusion, the response is much more complex than previously thought.

1. IE9 below (excluding IE9) using IE conditional comments, for IE8 and a separate style file

1	<!--[if lt IE 9]>

2	<link href="lt9.css" rel="stylesheet" type="text/css">

3	<![endif]-->

2. The MQ style of a module is placed after the style of the module, which conforms to the Cascade logic and is not stacked at the same time.

3. It is almost impossible to ask for simultaneous changes at a corresponding point, because the middle of the layout changes, both visually and specifically, the coder cannot master all the details.

4. Fluid layout is critical, as the parent is the reference, although many people know, but actually do when the most easily overlooked.

5. It is also important to clear the float, remember.

6. If you want the border, margin (inside and outside) also in the range of 100%, directly set Width:auto, do not give hope in the new CSS3 attribute, also do not hope on the-webkit,-webkit-will easily become the next IE6.

7. Reasonable nesting is more robust, using a wrapper element instead of setting the current element margin or padding. For example, if there is a and b two elements, width is 40%,maring-right is 10%, so it is easy to search the browser when the usurper, so with a wrapper element C to separate parcels A and B, then give C set 50%,a and B respectively set to 80%. This is a reasonable and robust nesting.

8. Two rows two columns this design, because of the fluid layout and the number of words, so add a packaging element for each row, more robust. In other words, do two lines first, then two columns in each row.

9. Do not expect that the width of each pixel will not exceed the expected performance, because no one knows the page at each pixel width of the appearance of the page, the more responsible for the more predictable the more inaccurate. So MQ may really be an "unintended value" (expected value refers to the response point agreed before the design and implementation)

10. The same interval of MQ and MQ Cascade, the global style will also be stacked with the styles in MQ, so the property should not be written as abbreviations. To reduce the risk of forgetting.

11. Image adaptive processing is not easy, especially with a border, if the normal conditions (not using MQ to constrain) under the set width and height, under another MQ, just set a property is not OK, or that sentence, MQ is not two select one (unless it is two different MQ interval), but cascading!!

12. If the elements at both ends of the horizontal list are justified, take four elements as an example, then the first three reserved left margin, the last one is zero, or the right side is 0; the next three have a right margin. Can take the first left there, the last one to the right, the middle of the two left offset margin to do, the short side is the margin divided by the number of white space, such as 4 list items, margin 40, 40 divided by 3. Is it good? is to ensure that each outer packaging for the banner of 25%.

13. Four 25%, two 50% it doesn't matter, but 50% 25% 25% can fall off the last one, so the 24.99,22.49 sometimes has a difference of pixels.

14. If the layout changes a little, then from the large to the small write MQ, do not have to write an interval, write the maximum value, such a layer of inheritance, small size inherit large size, in addition, do not worry too much about the weight of the selector itself, MQ will increase its priority.

15. such as navigation and copyright in the PC, pad, phone, the different layout. MQ, just write the interval. This means that the DOM has no style outside the interval, so it is no more than worrying about overrides, priorities, overrides, and unknown issues raised by inheritance. It reduces the rewriting of attributes, improves the efficiency and reduces the cost of modification. is actually equal to a DOM, for different devices to write different styles, these styles do not inherit.

16. If you want a few elements to be relative to each other, wrap them around and make them whole with other elements or groups of elements, so a robust response cannot be separated from these seemingly "redundant" package elements. However, the goal is to have the least achievable dom level.

17. With regard to the background map, it is sensible to "crop" the origin of the center, and it may seem strange to have one side as the Origin point. Alternatively, you can use a value of background-size to auto, and the other to use%

18. Big picture please write in an MQ interval, do not write the maximum value, this will take care of the problem of loading on demand.

Banner Style Practice

"	@media (min-width : 1110px

02	.banner{height:684px; background:url(img/banner1980.jpg) centercenter no-repeat; background-size:auto100%;}

03	}/*高度一直填充，两侧裁剪，这种体验先看比较好*/

04	/*以下不同目标分辨率载入不同的图片，保证k数最佳，裁剪体验应该一致*/

05	@media (min-width:769px) and (max-width:1110px){

06	.banner{height:383px; background:url(img/banner1110.jpg) centercenter;}

07

}

"	@media (min-width : 569px ) and ( max-width : 768px

09	.banner{height:265px; background:url(img/banner768.jpg) centercenter;}

10

}

one	@media (min-width : 415px ) and ( max-width : 568px

12	.banner{height:196px; background:url(img/banner568.jpg) centercenter;}

13

}

+	@media (min-width : 321px ) and ( max-width : 414px

15	.banner{height:143px; background:url(img/banner414.jpg) centercenter;}

16

}

17	@media (max-width:320px){

18	.banner{height:111px; background:url(img/banner320.jpg) centercenter;}

19

}

The logo is not recommended if it is hollowed out on the background of the banner. When the width of the browser window is narrowed, it gives a very obvious visual difference, feeling that the page is extremely non-robust (at least I feel like this) and seems to have a feeling of being scattered at any time. Words also have this feeling, especially when there is a lot of text. So you will find a lot of responsive website, his navigation background is solid color. Logos and navigation are not pierced on a background map. Of course there are a handful of them, like Adobe.

21.20, the general banner picture is almost full screen may be up to 1980px, and generally if it is centered, we have navigation and logo and some small functions, such as login, search control in the 1200px maximum width, when the page is larger than the maximum width, This area is like pinning to a background image, without causing two layers to feel. So when the width of the page is immediately equal to the maximum width, we are using MQ to redefine the maximum width of the next area, which is, of course, the smaller, which solves the problem of 20.

Png8 problem, IE6 under the solid color to do the bottom bar. My ideal idea is that when using IE6 to access all company Web products, give users a page, first login QQ account, then download the latest QQ browser, and then send this user 10 Q currency. Then the browser world is quiet.

23. Then 21, the maximum width of this area in the current MQ is equal to the next (smaller size) MQ size, so that the user is nailed to the top of the background map.

24. For some of the same elements, one has a special style, preferably using the Nth-of-type selector. In the test IE8 and so on, add a class for this particular DOM, and then write the rules for the copy response in that IE8 and the style sheet.

There is a package element under the body, as a reference for the overall elasticity, for IE6, IE7 write a separate width, why is 1000px, because it is difficult to obtain the user's resolution using IE6, or after the acquisition may be because of the data of a variety of bad decisions, so simple rough, Think that the use of IE6 are low-end device users, is a small display users, is the 1024x768 resolution; As for IE7, set 4 25% of the floating, in the process of narrowing the browser can fall off from time to time, for the decimal point of the pixel automatic upward complement, too sad. So the following:

1	regular css file

2	.layout{width:100%; max-width:1980px; min-width:320px;*zoom:1; margin:0auto;}

3

4	lt9css file

5	.layout{*width:1000px; min-width:1000px;}/*ie8的最小宽度为1000px，ie7 6只有1000px*/

26. For the module must be completely banner, for example, with the background color of the copyright, or banner, then you can lt9 in the folder for IE7 6 write a not only 1000px, but can be 100% of the style, but remember here as long as there is a column, otherwise it will produce 25 of the problems mentioned , perhaps, you can write:

1	lt9css file

2	.layout{*width:1000px; min-width:1000px;}/*ie8的最小宽度为1000px，ie7 6只有1000px*/

3	.one-percent{width:100%;}/*新增的，一定要在layout的后面，否则对于ie6 7不生效*/

4

5

html dom

6	<div class="layout one-percent">

7	<!--code-->

8

</div>

Therefore, I suggest that the banner main part of the copyright three with three layout package, so as to facilitate the IE6 IE7 IE8 style.

27. After up to six months of continuous statistics, 1366px users, according to Rasterization, n=24 as the benchmark, the w= (a*n)-I, so if you want to set the maximum width is set to 1310px;a=45px,i=10px But because of the layout of the Web site and the portal and e-commerce, and mainly for the flexible layout, so the maximum width here is what we need, as for the 45px and 10px, after a fixed layout can be used.

28. Response point: 1366px 1200px 1110px 768px 568px 414px 320px;768 The following is very good understanding also convenient constraints, the PC side of the response point is more difficult to control, so the first three values are basically in accordance with the layout of the operation. Reasons See 3.

29. Some people say that the write response style from small to uppercase, meaning that the first to write the mobile phone, and then write the PC side, the approximate reason is from large to lowercase, mobile phone will cascade and rewrite a lot of styles, may affect performance. Theoretically, I'm in favor of it, and I haven't actually tested how performance has affected it. But from the layout point of view, from the point of view of design, at least my logic is from large to lowercase, because the small Basic is on a large basis to do the deletion and layout changes, so the logic is relatively smooth when writing. However, whether from the big to the small, or from small to large, their own handy good. General Vision will first design the PC, and then consider what mobile is, this also makes me from the big to the small to write.

30. Before Huang asked me, I think the difficulty of the response is in the design or technically, I said that there is no technical, the key is the layout of the change and design experience. Now think about it. Layout change is difficult, but the technical means is also very important, in this aspect of depth and the choice of ways than the layout of the choice more complex.

31. Three major technologies of response: fluid, MQ, elastic images.

Turn from (http://www.wufangbo.com/xiang-ying-shi-shi-xian/)

Design and production method of responsive web site