响应式web网站设计制作方法
1. ie9以下(不包括ie9)采用ie条件注释,为ie8以及一下单独开一个样式文件
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区间内,不要只写最大值,这样会搞定按需加载的问题。
文章名称:响应式web网站设计制作方法
地址分享:http://scjbc.cn/view/284288.html