响应式设计入门篇

·什么是响应式页面设计

       简单来说就是自动识别屏幕的宽度、并做出相应调整的网页设计。

响应式设计的命名就是将弹性布局、弹性图片和媒体查询结合起来的。是针对任意设备（不论笔记本还是IPAD还是手机）对网页设计进行完美布局的一种显示机制。

 

·响应式页面设计基于的技术

       ·舍弃绝对宽度px（像素）换成百分比，字体大小也用相对大小em。

              计算百分比的公式：目标元素的宽度÷上下文元素宽度=百分比宽度。

              例如：最外层（wrapper）宽度是980px，header宽度是960px那么header的宽度就是

                       960÷980=97.959183%

    ·使用HTML5+CSS3。目前完整的HTML5和CSS3还没有被批准，但是已经可以超前学习使用了，（浏览器IE9以下的版本不能支持）可使用chrome/safari/firefox/opera等浏览器进行测试。（HTML5和CSS3的新功能很多，比如HMTL5的全新语义化元素，CSS3的图片和文字、动画等特效我这里不多说了）

CSS3媒体查询示例：

body{background-color:grey;}

@media screen and (max-width:980px){

    body{background-color:red;}

}

@media  screen and (max-width:768px){

    body{background-color:blue;}

}

 这样窗口宽度在980px以下的时候body显示红色，在768px以下时body为蓝色。

       ·自适应图片

（1.）CSS3解决方法示例：img{max-width:100%}（图片就会随着浏览器缩小而自动缩小尺寸）

         （2.）设置自适应图片（为较小的屏幕提供较小尺寸的图片）解决方案则需要Apache2、PHP5.x和GD库，也就是需要WEB服务器端编程。（配置文件zip已下载，但未试用）

      

·目前这种设计实际应用情况如何？以后的发展方向怎么样？

       如果预算充足且形势需要，真正的“手机版”网站确实是首选，但现在电子产品更新换代太快，为每种设备都开发个版本出来不太实际，所以根据适口大小为用户提供与之匹配的视觉效果是优先选择。目前国外很多网站都开始使用了响应式设计，而国内大多数用户还在使用IE6、7、8（IE6、7、8都不支持HTML5和CSS3的新属性），但是使用各种移动设备的用户越来越多也是国内现在的发展趋势。

       以下是我搜集来的参考数据：

       从2010年七月到2011年七月，全球的手机浏览器的使用量从2.8%上升到到7.02%。IE6的使用率从8.79%降到了3.42%，IE7也降到了5.45%。那么，使用手机（小屏幕）的用户越来越多，那们就需要我们制作响应式设计，让用户不必为了看清楚页面的内容不停的放大缩小页面或者不小心点了一个链接。

       IE6、7、8都不支持HTML5和CSS3的新属性，我们国内网站的绝大多数用户都使用IE9以下的版本，这样做响应式设计似乎没有太大意义，但是国内目前使用IE9以上版本的用户似乎还不多，但是国内使用各种移动设备的用户明显越来越多，所以需要我们提前学习这门新技术。 

 

       根据目前发展的趋势响应式设计在2012年被多次提出，但是响应式设计仍然在不断变化和创新，刚出的移动设备iPad Mini又狠狠地推翻了之前的设计想法，“让人们忘记设备尺寸”的理念将更快地驱动响应式设计，所以Web设计也将迎来更多的响应式设计元素。 而目前把整站改成响应式设计还不太现实，但是我们可以开始尝试了，比如：

      新闻类网站里新出的专题或者投票页面就开始入手尝试做响应式设计页面，从设计效果图的时候就开始思考在不同设备上的效果，可在不同的设备上进行测试（网址复杂的话可把网址设成二维码再扫描进入）。响应式设计看似简单实际做好是很不容易的，目前我们只有通过学习一步步的摸索来进行实践。     

       因为响应式设计是一门全新的概念，关于学习响应式设计的技巧和文章目前网上都是零零散散不成体系的，在这里推荐大家阅读2013年刚出版的《响应式WEB设计》一书。

 

转载于:https://www.cnblogs.com/ahwhyfy/archive/2013/04/24/3040618.html