首页手记一步到位让你学会移动端布局

一步到位让你学会移动端布局

标签：

Html5 JavaScript CSS3

想要实现兼容手机、平板、PC端的响应式布局，其实只需要3步：在meta中设置viewport属性、引入flexible.js插件使用rem布局、使用CSS3的媒体查询。

    如果懒得看，可以直接拖到文章最后。

一、viewport——浏览器网页显示区

1.viewport的概念

移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。

移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

下图列出了一些设备上浏览器的默认viewport的宽度。

2.PPK的关于三个viewport的理论

PPK大神认为，移动设备上有三种viewport：

①.layout viewport——浏览器默认的viewport（宽度大于浏览器可视区域的宽度），这个layout viewport的宽度可以通过 document.documentElement.clientWidth 来获取。

②.visual viewport——浏览器可视区域的大小，visual viewport的宽度可以通过window.innerWidth 来获取，但在Android 2, Oprea mini 和 UC 8中无法正确获取。

③.ideal viewport——移动设备的理想viewport， ideal viewport并没有一个固定的尺寸，不同的设备拥有有不同的ideal viewport。
所有的iphone的ideal viewport宽度都是320px，无论它的屏幕宽度是多大；但是安卓设备就比较复杂了，有320px的，有360px的，有384px的等等。
ideal viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。

3.利用meta标签对viewport进行控制

①.meta viewport 有6个属性：

width:设置layout viewport 的宽度，为一个正整数，或字符串"width-device";

initial-scale:设置页面的初始缩放值，为一个数字，可以带小数；

minimum-scale：允许用户的最小缩放值，为一个数字，可以带小数；

maximum-scale：允许用户的最大缩放值，为一个数字，可以带小数；

height：设置layout viewport 的高度，这个属性对我们并不重要，很少使用；

user-scalable：是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许。

②.我们在开发移动设备的网站时，最常见的的一个动作就是把下面这段代码复制到我们的head标签中：

<meta name="viewport"  content="width=device-width,  initial-scale=1.0, 
maximum-scale=1.0,  user-scalable=0">

4.利用meta标签对viewport进行控制的兼容性

①.width=device-width——兼容除iphone和ipad外的所有浏览器，在iphone和ipad上，无论是竖屏还是横屏，宽度都是竖屏时ideal viewport的宽度。

②.initial-scale=1——兼容除ie外的所有浏览器，在windows phone 上的IE 无论是竖屏还是横屏都把宽度设为竖屏时ideal viewport的宽度。

③.width 和 initial-scale=1同时出现——浏览器会取它们两个中较大的那个值。

总结一下，要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1，但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。

所以，最完美的写法应该是，两者都写上去，这样就 initial-scale=1 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病。

二、移动端响应式布局

1.移动端可以用rem来做响应式布局。
rem是一个相对大小的值，它相对于根元素<html>的font-size，我们只需要动态改变不同屏幕宽度下<html>的font-size就可实现移动端响应式布局。

1rem=the font-size of html(单位px)。

在移动端布局时，可以使用rem代替px来实现响应式布局。

例：如果一个物体宽度为200px；the font-size of html为100px；则该物体宽为200/100=2rem。

在考虑宽度对rem影响的同时，我们还需考虑苹果retina屏高分辨率对像素的影响。

2.DPR——devicePixelRatio （设备像素比简写dpr）

在早先的移动设备中，并没有DPR的概念。随着技术的发展，移动设备的屏幕像素密度越来越高。从iphone4开始，苹果公司推出了所谓的retina视网膜屏幕。之所以叫做视网膜屏幕，是因为屏幕的PPI(屏幕像素密度)太高，人的视网膜无法分辨出屏幕上的像素点。iphone4的分辨率提高了一倍，但屏幕尺寸却没有变化，这意味着同样大小的屏幕上，像素多了一倍，于是DPR = 2。此时需要改变viewport的initial-scale、minimum-scale、maximum-scale为0.5倍。

下图为苹果DPR：

简单说来，为了兼顾屏幕宽度和分辨率的变化，我们引入一个根据宽度动态改变根元素<html>的font-size和根据分辨率动态改变缩放比的框架——flexible.js。

在移动端布局的时候引入flexible.js并使用rem布局可以实现响应式。

3.百分比布局

一般用来设定宽度。不赘述。

三、媒体查询

rem布局只能适应手机端布局，无法同时完美兼容手机、平板、PC端，最后我们来看一下响应式设计的核心CSS技术Media(媒体查询器)的用法。

1.设置meta标签
使用媒体查询时也需要设置meta标签，设置方法和最开始我们讲得相同——把下面这段代码复制到我们的head标签中：

<meta name="viewport"  content="width=device-width,  initial-scale=1.0, 
maximum-scale=1.0,  user-scalable=0">

2.加载兼容js
①.兼容HTML5和CSS3 Media：
因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：

<!--[if lt IE 9]>
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

②.让IE文档模式处于最新状态：
现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8，为了防止这种情况，我们需要下面这段代码来让IE的文档模式永远都是最新的：

3.设置CSS3 Media写法
我们最常需要用到的媒体查询器的三个特性，大于，等于，小于的写法：
①.当页面大于960px的时候执行它下面的CSS:

@media screen and (min-width: 960px){
    body{background: #000;}
}

②.当页面等于960px的时候执行它下面的CSS:

@media screen and (max-device-width: 960px){
    body{ background: #000;}
}

③.当页面小于960px的时候执行它下面的CSS:

@media screen and (max-width: 960px){
    body{ background: #000;}
}

④.当页面宽度大于960px小于1200px的时候执行下面的CSS：

@media screen and (min-width:960px) and (max-width:1200px){
   body{ background: #000;}
}

4.CSS3 Media常用属性：
运算符 :
①and 用于符号两边规则均满足条件则匹配：
@media screen and (max-width : 600px) {/匹配宽度小于600px的电脑屏幕/}

②not 用于取非,所有不满足该规则的均匹配：
@media not print {/匹配除了打印机以外的所有设备/}
使用not时请注意,如果不加括号,也许会产生一些奇怪的现象,例:
@media not all and (max-width : 500px) {}
/等价于/
@media not (all and (max-width : 500px)) {}
/而不是/
@media (not all) and (max-width : 500px) {}
所以,如果要使用not,还是显式的添加括号比较明确点。

③only 限定某种设备：
@media only screen and (max-width : 600px) {/只匹配宽度小于600px的电脑屏幕/}

④,(逗号) 相当于or，用于两边有一条满足则匹配：

@media screen , (min-width : 800px) {/匹配电脑屏幕或者宽度大于800px的设备/}

Media Type媒体类型：
①.all 所有设备
②.screen 电脑显示器
③.handheld 便携设备
④.tv 电视类型设备
⑤.print 打印用纸打印预览视图

四、总结
只需将下列代码和flexible.js放入<head></head>内，再使用rem布局和媒体查询，即可实现兼容手机、平板、PC端的响应式布局。

<meta name="viewport"  content="width=device-width,  initial-scale=1.0, 
maximum-scale=1.0,  user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
<!--[if lt IE 9]>
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

点击查看更多内容