关于响应式布局

时间 2019-11-17

标签关于响应布局繁體版

原文原文链接

　　关于响应式布局，在以前的工做中已经接触到一些，最近看了 Ben Frain的《响应式web设计》这本书大受启发，趁闲下来的时候把我的对于移动端网页前端开发的一些经验总结一下。css

　　首先解释一下响应式布局的概念：html

　　响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站可以兼容多个终端——而不是为每一个终端作一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。前端

　　（摘自http://www.jiawin.com/response-type-layout-design/）android

　　在具体展开以前，我想先说一下非响应式布局的手机网页制做，以我如今手头上的项目为例。web

　　拿到这个项目的设计稿以后，个人想法是，它不是一个适于响应式布局的项目，理由有2：第一，这个项目的PC端网站和手机端网站是分别开发的，手机端的网站没必要同时适应电脑的大屏幕；第二，这个项目的设计使用了大量图片，背景也是由一张大图构成，与响应式布局的简洁风格相悖。基于以上两点缘由，我并未采用响应式布局，而是采用了按照设计稿中的640px像素宽度进行制做，在网页<head>部分加上<meta name="viewport" id="viewportid" content="target-densitydpi=320,width=640,user-scalable=no">的方法，使网页在手机上能满屏显示。浏览器

　　viewport是指移动设备浏览器的视区，手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，一般这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每一个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户能够经过平移和缩放来看网页的不一样部分。app

　　（摘自http://www.cnblogs.com/loalongblogs/archive/2011/06/21/2085971.html）
ide

　　因为网页是按照640px制做的，因此将viewport的宽度设置为640。至于另一个属性densitydpi，它是指屏幕每英寸显示的像素点，这里为何要将其设置为320呢？布局

　　通常的lcd屏显的densitydpi为160.测试

　　若是想在电脑上显示比较大的样子，而在移动设备上令其刚好彻底显示。

　　能够这么实现。

　　<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no"/>

　　即，对于160densitydpi 的设备来讲，将以320densitydpi来显示。
　　那么，若是设备宽分辨率为320（android 手机广泛这样子），则将在320分辨率内显示 320/160*320=640px的分辨率。

　　即，640px宽度将在手机上刚好所有宽度显示。而640px宽度，对于laptop端，也是一个比较合适的分辨率。

　　（摘自http://zhan.renren.com/tag?value=webstatic）

　　这样设置以后，用手机进行测试（Android），发现并不成功，网页仍然溢出到屏幕以外了。通过咨询，得知须要在页面中加入一段js代码：

　　if (window.innerWidth > 640) {
　　　　document.getElementById('viewportid').setAttribute('content', 'target-densitydpi=285,width=640,user-scalable=no');
　　}

　　原理？我还在研究...⊙﹏⊙b汗... 不过貌似这里的285改为别的数字也没差？

　　这样，网页在手机上就能够满屏显示了。这个方法的优势是，不须要为不一样尺寸的手机考虑不一样的样式，它始终会满屏显示（至少测试的几部手机都是如此），代码比较简单；缺点也很明显，网页缺乏对超过640px屏幕的支持，不够灵活，并且对于更大的设备必须从新开发独立的网站，成本更高。

　　在移动互联网高速发展，各类移动设备不断出现的今天，响应式布局开始被提出，它是一种更为灵活，可以适应各类终端的布局。它的优缺点是：

　　优势：

面对不一样分辨率设备灵活性强
可以快捷解决多设备显示适应问题

　　缺点：

兼容各类设备工做量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果
必定程度上改变了网站原有的布局结构，会出现用户混淆的状况

　　（摘自http://www.jiawin.com/response-type-layout-design/）

　　响应式布局的网页应该如何制做呢？为了方便讲述，我以本身尝试制做的一个网页为例。

　　这个网页的布局包括头部<header>，在最顶部，其中包含logo和导航；

　　主体区域<div id="content">，包含了<div id="main">和<aside>两部分，<aside>在右边；

　　最后是页脚<footer>。

　　首先为页面添加<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0" />

　　width=device-width ：自适应屏幕大小；initial-scale=1.0 ：初始缩放是1倍；minimum-scale=1.0：最小容许缩放是1倍；maximum-scale=2.0 ：最大容许缩放是2倍；

　　接着，我给<header>设置宽度为100%，内部用一个div包裹logo和nav，这个div的宽度也设为一个百分数并居中显示，具体值是多少呢？按照书上的一个公式，用目标元素的宽度除以上下文元素的宽度，获得的数字转化为百分数就是咱们须要的值。（注意，公式里面的宽度是指设计稿中的实际像素值。）这里，这个div的上下文元素是<header>，公式算出来的值大概是68%多（尽可能多保留一些小数，使结果更精确）。同理也能够算出nav以及nav下面每一个元素的宽度。

　　那么<header>的高度呢，也用百分数吗？这里我尝试使用百分数但没有做用，缘由是<header>的上下文元素<body>并无一个肯定的高度值（<body>的宽度默认是屏幕的宽度），并且咱们也不可能给body一个高度值，由于网页在纵向上无限扩展的。再者，我也没有为<header>设置百分比高度的打算，由于我不但愿logo和nav被等比例缩小，而但愿它们保持比较清楚的大小，但也不是一成不变。这时候就涉及到响应式布局中用em代替px的方法。

　　我在css中声明body的font-size为100%，这时1em=16px，用元素的像素值除以16就能够获得em值。使用em和px的区别在于，当咱们在media query媒介查询里面更改body的font-size值的百分比值的时候（好比改成90%），1em就再也不等于16px了。而等于16*0.9。

　　为<header>的高度设置了em值以后，再为logo和nav设置高度为100%就能够了。另外，为了保持logo图片的宽高比例协调，logo的宽度也不是百分比值，而是具体的em值，但这样会出现一个问题：当浏览器窗口被缩小到必定程度的时候，logo和nav就被挤压到了一块儿，再缩小的话<header>下面的div就已经装不下他们两个了。这时我再次使用媒体查询来进行判断，当视口小于某个值的时候，将logo和nav的宽度都设为100%，float值为none，并居中显示，这样logo和nav就分为两行显示了。简略代码以下：

　　@media screen and (max-width: 某个像素值){

　　　　/*css样式*/

　　}

　　这样，网页头部的响应式布局就算基本完成了。接下来的<content>部分，正常状况下#main和aside是分左右显示的，当视口小于某个值的时候，我感受显示效果过小了，这时候基本上来到了移动设备的一个宽度，因此我决定再也不将aside显示在#main的右边，而是放到它的下面去。

　　后面的工做大致雷同，就是要在视口不断变小的过程当中，发现样式中的不和谐现象，充分考虑用户体验，给予对应的css样式。如#main中的列表，正常是三个一行显示的，会根据视口大小逐步从3个到2个再到1个。

　　最后，关于响应式布局再补充几点：

　　1.弹性图片：首先为<img>元素设置max-width:100%，这样全部的<img>图片都会随着视口的改变而按比例缩放且不会超过图片自己的尺寸；

　　2.HTML5和CSS3：这两个前沿技术是最适合于响应式布局的，用它们编写出的网页代码简洁、易维护、高度语义化、对背景图片和js脚本的依赖小，并且媒体查询功能自己就出自CSS3；

　　3.使用字体图标代替图片图标（http://icomoon.io/app/#/select）：这样作的好处是能减小http请求，加快页面加载速度，并且图标不易失真，改变大小和颜色也很方便（和字体同样）；

　　4.跨浏览器问题：使用一些js补丁来修复老旧浏览器对HTML5和CSS3的不支持，以及优雅降级。