响应式web网站设计制做方法

在研究响应式的时候，记录了一些感想，分享出来，抛砖引玉，但愿能够和你们一块儿讨论。总结下来，响应式比以前想象的要复杂得多。

1. ie9如下（不包括ie9）采用ie条件注释，为ie8以及一下单独开一个样式文件

<!--[if lt IE 9]>
<link href="lt9.css" rel="stylesheet" type="text/css">
<![endif]-->

2. 一个模块的mq样式总体放在这个模块的样式的以后，符合层叠逻辑，也同时以避免被层叠。

3. 祈求在一个相应点上同时作变化几乎是不可能的，由于版式中间的变化，不管是视觉仍是具体的编码人员不可能掌握全部细节。

4. 流体布局很关键，%视父级为参照物，这一点虽然不少人都知道，可是实际作的时候却最容易被忽略。

5. 清除浮动也很重要，切记。

6. 若是你但愿边框、边距（内、外）也在100%的范围内，直接设置width:auto就行了，不要给予但愿在新的css3属性上，也不要寄但愿在-webkit上，-webkit-很容易就会变成下一个ie6了。

7. 合理的嵌套更加健壮，用一个包装元素来替代设置当前元素margin或者padding。举例，假若有A和B两个元素，width是40%，maring-right是10%，这样很容易在搜索浏览器的时候篡位，因此用一个包装元素C去分别包裹A和B，然给给C设置50%，A和B分别设置为80%。这样就是合理且健壮的嵌套了。

8. 两行两列这种设计，因为流体布局和字数的不一样，因此为每一行添加一个包装元素，更加健壮。也就是说，先作两行，再在每一行里作两列。

9. 不要奢望在在每个像素的宽度上不会出现超出预期的表现，由于没有任何人知道页面在每个像素宽度时候的表现的样子，页面越负责可预期的就越不许确。因此mq可能真的是“非预期数值”（预期数值指代在设计和实现以前约定的响应点）

10. 相同区间的mq和mq会层叠，全局的样式也会和mq中的样式层叠，因此属性尽可能不要写成缩写。以减小忘记的风险。

11. 图片的自适应处理不容易，特别是有边框的，若是正常条件（没有利用mq来约束）下设置了宽和高，在另一个mq下，仅仅设置一个属性是不行的，仍是那句话，mq不是二选一（除非是两个不一样的mq区间），而是层叠！！

12. 若是水平列表的两端的元素两端对齐，以四个元素为例，那么除了前三个预留左边距，最后一个为零；或者第一个右边据为0；后三个有右边距之外。能够采用第一个左侧有，最后一个右侧有，中间两个左右偏移边距来作，短的一面为 边距除以空白数，好比4个列表项，边距为40,则40除以3。好处么？就是能够保证每个外包装为通栏的25%。

13. 四个25%，两个50% 不要紧，可是50% 25% 25%就可能会掉下去最后一个，因此24.99，22.49有时还会相差1~2像素。

14. 若是版式变化不大，那么从大到小的写mq，没必要写一个区间，只写最大值便可，这样一层一层的继承，小尺寸继承大尺寸，另外，不用过度担忧选择器自己权重的问题，mq会提升其优先级。

15. 像导航和版权这种在pc、pad、phone大相径庭的版式。mq，就写区间。这样在区间外就等于这些dom毫无样式，这样就不比担忧由继承引起的覆盖、优先级、重写以及未知问题。减小了属性的重写，提升了效率、下降了修改为本。其实就是等于一个dom，为不一样的设备写不一样的样式，这些样式之间不继承。

16. 若是你但愿几个元素是相对位置不变的话，请将他们包裹，经过这个包裹元素使他们总体与其余元素或元素组作排版，因此一个健壮的响应式离不开这些看似“冗余”的包裹元素。但仍是以最少的可实现目标的dom层级为目标。

17. 关于背景图，以中心为原点进行“裁剪”是理智的，已某一侧为原点看起来都有点怪。另外可使用background-size某个值为auto，另一个使用%

18. 大图片请写在一个mq区间内，不要只写最大值，这样会搞定按需加载的问题。

19. banner样式实践

@media (min-width:1110px){
.banner{height:684px; background:url(img/banner1980.jpg) center center no-repeat; background-size:auto 100%;}
}/*高度一直填充，两侧裁剪，这种体验先看比较好*/
/*如下不一样目标分辨率载入不一样的图片，保证k数最佳，裁剪体验应该一致*/
@media (min-width:769px) and (max-width:1110px){
.banner{height:383px; background:url(img/banner1110.jpg) center center;}
}
@media (min-width:569px) and (max-width:768px){
.banner{height:265px; background:url(img/banner768.jpg) center center;}
}
@media (min-width:415px) and (max-width:568px){
.banner{height:196px; background:url(img/banner568.jpg) center center;}
}
@media (min-width:321px) and (max-width:414px){
.banner{height:143px; background:url(img/banner414.jpg) center center;}
}
@media (max-width:320px){
.banner{height:111px; background:url(img/banner320.jpg) center center;}
}

20. logo若是是在banner的背景图上镂空，这样是不推荐的。在缩小浏览器窗口宽度的时候，给人以很明显很明显的视觉差，感受页面极其不健壮（至少个人感受是这样），彷佛有随时要散的感受。文字也有这感受，特别是有大量文字的时候。因此你会发现不少响应式好的网站，他的导航的底色都是纯色。logo和导航都不镂空在一张背景图上。固然也有少数在的，好比adobe。

21. 接20，通常banner图片几乎是满屏的可能高达1980px；而通常若是是居中的话，咱们把导航和logo以及一些小功能，好比登陆、搜索控制在1200px最大宽度，当页面大于这个最大宽度的时候，这个区域就像钉在了背景图上，不会致使有两个图层的感受。因此当页面宽度立刻等于最大宽度的时候，咱们在利用mq从新写定义下一这个区域的最大宽度，固然是该小一点，这样就解决了20出现的那个问题。

22. png8的问题，ie6下就用纯色作底吧。我最理想的想法是，当用ie6访问全部公司web产品的时候，给用户一个页面，先登陆QQ账号，而后下载最新的QQ浏览器，而后发这个用户10个Q币。而后浏览器界就清静了。

23. 接21，当前mq中的这个区域的最大宽度等于下一个（更小的一个尺寸）mq的尺寸，这样就用户的钉在了背景图的上面了。

24. 对于相同的一些元素，某一个有特殊的样式，优先使用nth-of-type选择器。在测试ie8以及一下的时候，再为这个特殊的dom添加一个class之类，而后再在那个ie8以及一下的样式表中书写复制响应的规则。

25. body下有一个包裹元素，做为总体弹性的参照，为ie六、ie7单独写一个宽度，为何是1000px，因为很难得到使用ie6的用户的分辨率，或者说获取了以后可能由于数据繁多很差决策，因此简单粗暴，认为使用ie6的都是低端设备用户，是小显示器用户，是1024*768分辨率；至于ie7，设置了4个25%的浮动，在缩小浏览器的过程当中都能时不时的掉下去一个，对于小数点的像素就自动向上补全，太悲哀了。因此以下：

regular css file
.layout{width:100%; max-width:1980px; min-width:320px;*zoom:1; margin:0 auto;}
 
lt9 css file
.layout{*width:1000px; min-width:1000px;}/*ie8的最小宽度为1000px，ie7 6只有1000px*/

26. 对于必定要百分之百通栏的模块，好比，带有背景色的版权，或者banner，那么能够在lt9的文件夹里为ie7 6写一个不是只有1000px，而是能够100%的样式，可是切记这里只要有一列，不然就又产生了25中提到的问题，也许，你能够这么写：

lt9 css file
.layout{*width:1000px; min-width:1000px;}/*ie8的最小宽度为1000px，ie7 6只有1000px*/
.one-percent{width:100%;}/*新增的，必定要在layout的后面，不然对于ie6 7不生效*/
 
html dom
<div class="layout one-percent">
<!--code-->
</div>

因此我建议，把banner 主体部分 版权 三者用三个layout包裹，这样便于对ie6 ie7 ie8作样式。

27. 通过长达半年的持续统计，1366px用户最多，根据栅格化，n=24为基准，得出W=(A*n)-i，因此若是要设置最大宽度则设置为1310px；a=45px,i=10px；不过因为与门户和电商等网站的排版不一样且主要为了弹性版式，因此这里最大宽度是咱们所须要的，至于45px和10px，之后有固定版式的话可使用。

28. 响应点：1366px 1200px 1110px 768px 568px 414px 320px；768如下的很好理解也方便约束，PC侧的响应点是较难控制的，因此前面三个值基本都是按照版式来操做的。缘由参见3。

29. 有的人说写响应式从小往大写，意思是说先写手机端，而后写PC端，大体的缘由是从大往小写的话，手机就要层叠和重写不少样式，可能会影响性能。理论上，我是同意的，实际上我并无测试过到底性能有多么影响。可是单单从布局的角度上讲，从设计的角度上讲，至少个人逻辑是从大往小写，由于小的基本都是在大的基础上作删减和布局的变化，因此写的时候逻辑比较顺畅。不过不管从大到小，仍是从小到大，本身顺手就好。通常视觉都会先设计PC的，而后考虑mobile是什么样的，这一点也使得我是从大到小的去写。

30. 以前黄老师问我，认为响应式的难点是在设计上仍是在技术上，我当时说是技术上没什么，关键是版式的变化和设计的体验。如今想一想。版式变化当然是难点，可是技术手段也很重要，在这方面的深度和方式的选择要比版式上的选择复杂的多。

31. 响应式三大技术：流体、mq、弹性图片。

以上都是我的经验，不免片面，欢迎讨论。