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

《响应式web网站设计制作方法.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、在研究响应式的时候，记录了一些感想，分享出来，抛砖引玉，希望可以和大家一起讨论。总结下来，响应式比之前想象的要复杂得多。1.ie9以下（不包括ie9）采用ie条件注释，为ie8以及一下单独开一个样式文件2.一个模块的mq样式整体放在这个模块的样式的之后，符合层叠逻辑，也同时以免被层叠。3.祈求在一个相应点上同时做变化几乎是不可能的，因为版式中间的变化，无论是视觉还是具体的编码人员不可能掌握所有细节。4.流体布局很关键，%视父级为参照物

2、，这一点虽然很多人都知道，但是实际做的时候却最容易被忽略。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%。这样就是合理且健

3、壮的嵌套了。8.两行两列这种设计，由于流体布局和字数的不同，所以为每一行添加一个包装元素，更加健壮。也就是说，先做两行，再在每一行里做两列。9.不要奢望在在每一个像素的宽度上不会出现超出预期的表现，因为没有任何人知道页面在每一个像素宽度时候的表现的样子，页面越负责可预期的就越不准确。所以mq可能真的是“非预期数值”（预期数值指代在设计和实现之前约定的响应点）10.相同区间的mq和mq会层叠，全局的样式也会和mq中的样式层叠，所以属性尽量不要写成缩写。以减少忘记的风险。11.图片的自适应处理不容易，特别是有边框的，如果正常条件（没有利用mq来约束）下设置了宽和高，在另外一个mq下，仅仅设

4、置一个属性是不行的，还是那句话，mq不是二选一（除非是两个不同的mq区间），而是层叠！！12.如果水平列表的两端的元素两端对齐，以四个元素为例，那么除了前三个预留左边距，最后一个为零；或者第一个右边据为0；后三个有右边距以外。可以采用第一个左侧有，最后一个右侧有，中间两个左右偏移边距来做，短的一面为边距除以空白数，比如4个列表项，边距为40,则40除以3。好处么？就是可以保证每一个外包装为通栏的25%。13.四个25%，两个50%没关系，但是50%25%25%就可能会掉下去最后一个，所以24.99，22.49有时还会相差1~2像素。14.如果版式变化不大，那么从大到小的写mq，不必写一

5、个区间，只写最大值即可，这样一层一层的继承，小尺寸继承大尺寸，另外，不用过分担心选择器本身权重的问题，mq会提高其优先级。15.像导航和版权这种在pc、pad、phone截然不同的版式。mq，就写区间。这样在区间外就等于这些dom毫无样式，这样就不比担心由继承引发的覆盖、优先级、重写以及未知问题。减少了属性的重写，提高了效率、降低了修改成本。其实就是等于一个dom，为不同的设备写不同的样式，这些样式之间不继承。16.如果你希望几个元素是相对位置不变的话，请将他们包裹，通过这个包裹元素使他们整体与其他元素或元素组做排版，所以一个健壮的响应式离不开这些看似“冗余”的包裹元素。但还是以最少的

6、可实现目标的dom层级为目标。17.关于背景图，以中心为原点进行“裁剪”是理智的，已某一侧为原点看起来都有点怪。另外可以使用background-size某个值为auto，另外一个使用%18.大图片请写在一个mq区间内，不要只写最大值，这样会搞定按需加载的问题。19.banner样式实践@media(min-width:1110px){.banner{height:684px;background:url(img/banner1980.jpg)centercenterno-repeat;background-size:auto100%;}}/*高度一直填充，两侧裁剪，这种体验先看比较好

7、*//*以下不同目标分辨率载入不同的图片，保证k数最佳，裁剪体验应该一致*/@media(min-width:769px)and(max-width:1110px){.banner{height:383px;background:url(img/banner1110.jpg)centercenter;}}@media(min-width:569px)and(max-width:768px){.banner{height:265px;backgr