响应式web网站设计制作方法.docVIP

在研究响应式的时候，记录了一些感想，分享出来，抛砖引玉，希望可以和大家一起讨论。总结下来，响应式比之前想象的要复杂得多。 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