移动端布局以及rem的适配

移动端布局方式与设计图

现有的布局方式：

1. 固定布局，每一个元素都是固定的尺寸，内容区域居中在浏览器中间

   内容区域的尺寸：980,1000,1100,1200

2. 响应式布局，利用媒体查询来实现不同尺寸的浏览器显示结构不一样 @media 根据浏览器分辨率大小进行适配

   一般会有三张设计图，PC,平板,手机

3. 自适应布局，属于响应式里的一种，利用rem、百分比、vwvh等布局单位来实现

   设计图一般只有一张，640、750居多

移动端布局

移动的屏幕和PC的屏幕有一个很大的区别，移动端是视网膜高清屏（Retina）

retina屏幕有一个属性叫DPR（设备像素缩放比） = 物理像素/逻辑像素

例如，iphone 6手机商宣传手机的尺寸是：750宽，这个值就是物理像素，而从开发者眼里我们所指的其实是375px（逻辑像素）

在dpr为2的手机中，我们的一个逻辑像素会从横纵两个方向分别以2个像素点来渲染

如果不管dpr的话，其实我们布局依然可以，因为我们设置一个像素宽高的东西的话，在手机上看见的基本也就是这么大，至于手机设备用多少个物理像素去渲染，大小还是不会变化的

设计师出图都是2倍的，是因为，在页面中除了字体（矢量图）大部分都是位图，也就是如果一个像素宽高的盒子里准备放入图片，如果图片的尺寸也是一个像素宽高的话，因为其实在移动端渲染的时候是用四个像素来渲染，图片会失真，但是如果我们给一像素宽高的盒子放入2像素宽高的图片的话，就不会失真

布局单位

因为我们的移动设备有很多种，所以我们的布局不可能是固定布局，所以我们要使用自适应布局

我们在开发中可以选用很多自适应布局单位，这些单位必须满足一个条件

1. %

   优点：简单，无需设置，兼容性好
   缺点：基于父元素的属性来设置，如果父元素没有宽高，设置无效

2. vw,vh

   一个vw等于viewport宽度的百分之一，一个vh等于viewport高度的百分之一
   vmax等于vw和vh中较大的那个 vmin等于vw和vh中较小的那个

   优点：简单，无需设置
   缺点：兼容性不好

3. rem

   一个rem等于根元素（html）的字体大小，兼容性很好

   优点：兼容好，使用简单
   缺点：需要设置

rem与适配

当我们想使用一个自适应单位的时候，发现%有缺陷，vwvh兼容性差，弹性盒所针对的是元素排列的问题，只适用于某种情况，所以我们就想，能给我一个没啥上面的缺陷的单位，想到了rem

rem的兼容性好一点，它也确实是一个布局单位，不受父子元素的影响，设置了rem之后，也不会对px、em等单位造成影响，它是一个理想的单位

rem也有一个致命的问题，就是它不是一个自适应的单位，不会跟着设备尺寸不同而不同，但是没有关系，我们有万能的js，可以去动态的设置它

方法1：

我们可以将1rem设置成屏幕的某一个比例，比如将1rem设置成屏幕的十分之一

假设我们的设计图是640宽的，我们拿到之后量了一下a的宽度为480px，得到比例a所占屏幕3/4，根据rem与屏幕的关系，最后设置成7.5rem

就是说在设置元素的宽度是时候，会根据设定好的比例关系去进行换算

方法2：

如果设计图是640的图，这个时候我们知道它是照着i5来的，我们现在假设世界上所有的手机都是320的，也就是每一个人用的都是i5，在这个理想的情况下，因为手机都一样，尺寸都一样，和pc端的固定布局也就一样了

假设有一个在640的图上我们量得的宽度是320，因为是二倍图，所以我们知道，它的实际宽度是160px，这样的话，我们直接给这个设置设置width：160px就可以了，这个时候，我们玩个花子，不要单纯的使用px来设置，用rem来设置，例如，我可以将rem设置为100px，这样的，刚才的盒子设置为width：1.6rem，算法就是 量的宽度/(dpr*100) = 要设置的rem值

这样我们就可以开心的开发，量一个尺寸，除个2，再小数点推两位，设置就行了，但是我们也知道，手机的尺寸并不可能都是320，这样的话，没有关系，我们可以根据一个比例来算rem到底设置为多少

在手机宽度为320的时候，我们设置的1rem=100px，所以有一个比例 b = 100/320

那么在W宽度的手机上，1rem应该是多少呢？设为x 那么x/w = b

得到x = w/3.2

那么就不要写死html的fontsize为100了。而是用js去设置：

document.documentElement.style.fontSize = document.documentElement.clientWidth/3.2 + 'px’

这样，我们就可以得到一个自适应的rem

方法3：

rem与vw结合

vw、vh是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。

视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）

vh：视窗高度的百分比

vmin/vmax

vmin：当前 vw 和 vh 中较小的一个值

vmax：当前 vw 和 vh 中较大的一个值

100px = ? rem

100px = ? vw

假设视窗宽度为750px

1vw = 7.5px

1rem = 100px/7.5px = 13.333333333vw

然后只需设置

html{font-size: 13.333333vw;}

750px设计图：

html{font-size: 13.3333333333vw;}

640px设计图：

html{font-size: 15.625vw;}

1080px设计图：

html{font-size: 9.259259vw;}