移动端自适应

移动端自适应

下面介绍一些有关移动端自适应的一些概念。

1. 什么是Viewport?

​ 手机浏览器会把页面放入到一个虚拟的“视口”（viewport）中，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域大，也可能比浏览器的可视区域小。通常这个虚拟的“视口”（viewport）比屏幕宽，会把网页挤到一个很小的窗口。如果不显示地设置viewport，那么浏览器就会把width默认设置为980。但后果是浏览器出现横向滚动条，因为浏览器可视区域的宽度比默认的viewport的宽度小。然后浏览器引进了 viewport这个 meta tag，让网页开发者来控制 viewport的大小和缩放。

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

meta viewport 的6个属性:

• width ： 设置viewport的宽度
• height： 设置viewport的高度
• initial-scale ： 设置页面的初始缩放值
• minimum-scale ：允许用户的最小缩放值
• maximum-scale：允许用户的最大缩放值
• user-scalable： 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许,一般设置为no

特殊说明：（IE6,7,8）支持，需要使用css3mediaqueries.js

<!--[if lt IE 9]>
　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
　　<![endif]-->

2. rem和em的区别？

rem和em在做移动端自适应非常的重要，它们都是相对单位

1. em (相对父级)

   例如: 父节点字体大小16px,子节点设置字体大小为1.25em,子节点字体大小转化为像素为 1.25 x 16 = 20

   2. rem(相对根节点)

   例如: 根节点字体大小16px,任一节点设置字体大小为1.25rem,节点字体大小转化为像素为 1.25 x 16 = 20

3. 物理像素、设备像素、逻辑像素、CSS像素

设备像素 = 物理像素 ， 设备能控制显示的最小单位，我们可以把这些像素看作成显示器上一个个的点。

1. css像素

   css像素是css样式表语言中用来表示长度的一个单位，单位是px。

2. 设备像素（DP device pixels）

设备像素（物理像素），顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt。

3. 逻辑像素（ logic point ）

逻辑像素的单位是PT，它是按照内容的尺寸计算的单位。比如iPhone 4的逻辑像素是480x320pt。但是由于每个逻辑的点因为视网膜屏密度增加了一倍，即1pt=2px，那么其实iPhone 4的物理像素是960x640px。