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

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

ID:59218915

大小:21.00 KB

页数:6页

时间:2020-09-09

响应式web网站设计制作方法.doc_第1页
响应式web网站设计制作方法.doc_第2页
响应式web网站设计制作方法.doc_第3页
响应式web网站设计制作方法.doc_第4页
响应式web网站设计制作方法.doc_第5页
资源描述:

《响应式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

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。