您现在的位置:爱折腾>> web>>正文内容

关于响应式设计的一点总结

目前使用小屏幕设备上网的人数正在以前所未有的速度增长,同时,27英寸和30英寸的大显示器也在快速普及;上网设备之间的尺寸差异与日俱增。
可行方案:基于html5和css3的响应式网页设计;可以使网站兼容多种设备和屏幕。
智能手机很重要(老版的IE不再重要):智能手机的使用量使用率的上升,以及IE6,7等老版IE的使用率下降;
响应式设计并不总是最佳选择,如果有时间有预算,做一个真正的单独的手机版站点才是首选;

弹性网格布局,弹性图片,媒体和媒体查询整合起来即为响应式网页设计;我认为是针对任何设备对网页内容进行完美布局的一种现实机制。


1.客户是否想支持互联网增长最迅猛的市场?                                                ----适合响应式
2.客户是否想要最简洁,快速,且易于维护的代码?                                       ----适合响应式
3.客户是否理解用户体验可以且本应该根据浏览器不同而不同?                         ----适合响应式
4.客户是否要求设计效果在所有浏览器上表现一致,包括IE8以及更低版本?         ----不适合响应式
5.在网站的当前或预期中,是否有百分之七八十以上的人使用IE8以及耕地版本?   ----不适合响应式

引导用户:网站不必再所有浏览器中表现一致

允许页面显示效果在老旧浏览器中有细微的差别,可以使代码更易维护,更新成本也更低;反之会使网站增加大量的图片,是网站变慢,制作成本变高,更难维护;
老旧浏览器的用户越来越少,现代浏览器的用户越来越多,趋势如此,支持大多数;

理想状态下是,为最小的可视区域设计版式,然后在此基础上渐进增强用户体验。

实现响应式的关键技术是css3;

媒体查询:
@media screen and (max-width:320px) and  (max-height:480px){/iphone4,4s/}
@media screen and (max-width:320px) and  (max-height:568px){/iphone5/}
@media screen and (max-width:375px) and  (max-height:667px){/iphone6/}
@media screen and (max-width:414px) and  (max-height:736px){/iphone6s/}
@media screen and (min-width:321px) and  (max-width:360px){//}
@media screen and (min-width:361px) and  (max-width:400px){//}
@media screen and (min-width:401px) and  (max-height:480px){//}

width:视口宽度;height:视口高度;device-width:渲染表面的宽度;device-height:渲染表面的高度;orientation:检查设备处于横向还是纵向;aspect-ratio:基于视口的宽高比;device-aspect-ratio:基于设备渲染平面的宽高比;color:每个颜色的位数;color-index:设备的颜色索引表中的颜色数;resolution:用来检测设备或打印机的分辨率;scan:电视机的扫描方式;

css层叠样式,样式表中后面的样式会覆盖前面相同的样式(除非前面的样式具有较高的针对性);

respond.js是为IE8及更低版本增加媒体查询支持的最快的JavaScript工具;
(sarifi浏览器默认在980像素宽的画布上渲染页面,然后把画布缩小到与视口大小匹配)
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

保证图片尽量精简;
内容优先的原则;

媒体查询只能为我们提供自适应设计效果,不能真正实现响应式设计;媒体查询是必须的,灵动显示的流式布局同意必需;创建基本的流动布局,保证页面在媒体查询断点之间的显示效果平滑顺畅。

固定布局经不起未来考验,百分比布局卷土重来;

必记公式:
        目标元素宽度  /  上下文元素宽度 = 百分比宽度

黄金分割率:
        1:1.61803398874989

em代替px;相对上下文字体大小;现代浏览器默认字体大小为16px;font-size:16px;font-size:100%;font-size:1em;

弹性图片: max-width:100%; ---->图片资源大小问题,超大,带宽限制; -----》为不同的屏幕尺寸提供不同的图片;---》服务端编程提供自适应图片(adaptive-images.com)
width:28%;max-width:200px;限制最大宽度;

css网格系统:快速搭建界面布局。960.gs、columnal

<b>样式钩子,纯粹为了吸引人的注意,除此之外不传递任何重要性,也不暗示其他语态和语气,(以前都是用来给文本加粗的)
<em>强调内容中 的重点;(以前都是用来为文本添加样式的)
<i>一小段有不同语态或语气的文字


遵循WAI-ARIA实现无障碍站点

视频自适应大小:jquery插件 fitvidsjs.com

在可预见的未来,我们需要以基本内容,分层特性,和渐进增强为基准来设计和制作网站,考虑带宽差异,代码应该尽可能保持简洁和灵活。
 

相关文章