一、布局方案
目前在解决移动端页面适配问题方案选择上，目前用得比较多是百分比布局，弹性布局flex，rem布局，本文将重点跟大家探讨rem布局。
二、viewport
在介绍rem布局之前，首先跟大家介绍一下viewpoint视口。
通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。
三个viewport：layout viewport，visual viewport，ideal viewport
layout viewport：即为布局视口，dom宽度，浏览器默认情况下把viewport设为一个较宽的值，比如980px。（document.documentElement.clientWidth）
visual viewport：浏览器可视区域的大小，屏幕宽度。（window. innerWidth）
ideal viewport： 理想适口：使布局视口就是可见视口；
在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？这就该轮到meta标签出场了。
我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，如下：
| width | 设置layout viewport 的宽度，为一个正整数，或字符串"width-device" |
| initial-scale | 设置页面的初始缩放值，为一个数字，可以带小数 |
| minimum-scale | 允许用户的最小缩放值，为一个数字，可以带小数 |
| maximum-scale | 允许用户的最大缩放值，为一个数字，可以带小数 |
| height | 设置layout viewport 的高度，这个属性对我们并不重要，很少使用 |
| user-scalable | 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 |
三、js实现rem自动匹配计算font-size
利用js监听屏幕宽度变化来实现更改HTML 根元素font-size的值，一下是js代码：
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth>=640){ docEl.style.fontSize = '100px'; }else{ docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
此代码选640px为基准值，为什么选640呢，
比如当页面中某一div的宽度为60，高度为65的时候，就可以直接这样写样式：
{ 0.6rem; height:0.65rem }
四、使用媒体查询进行适配
一下为sass写法，比如拿到的设计稿是iPhone6，设备宽为375px.设计稿采用的像素是物理像素，二倍屏(retina)750px,所以当计算的时候要除以2.
// REM 适配 <html> $designWidth:375; // 375px (iPhone 6) // 此为基准值, 与视觉设计稿 `宽度/2` 保持一致 html { font-size:20px; } @media (min-320px){ html{ font-size: #{20*320PX/$designWidth} !important; } } @media (min-360px){ html{ font-size: #{20*360PX/$designWidth} !important; } } @media (min-375px){ html{ font-size:#{20*375PX/$designWidth} !important; } } @media (min-412px){ html{ font-size: #{20*412PX/$designWidth} !important; } } @media (min-480px){ html{ font-size:#{20*480PX/$designWidth} !important; } } @media (min-640px){ html{ font-size: #{20*640PX/$designWidth} !important; } } @media (min-720px){ html{ font-size:#{20*720PX/$designWidth} !important; } } @media (min-768px){ html{ font-size: #{20*768PX/$designWidth} !important; } } @media (min-1440px){ html{ font-size:#{20*1440PX/$designWidth} !important; } }
为了减少单位换算的时间，加快编写代码的效率，可以采用函数自动换算：
@function torem($px){//$px为需要转换的字号 @return ($px / 40) * 1rem; //40px为根字体大小 }
因为根字体为font-size：20px，设计稿采用2倍像素表示，所以除以20*2;（如果设计稿采用设备像素及跟屏幕尺寸一样的比例，则不用除以2）
比如一个div的在设计稿上的宽度是366px,高度为239px,则直接可以这样写：
div{ width:torem(366); height:torem(239); }
四、图片适配问题
当项目不需要对图片要求很高的话可以直接通过宽度适配，假如需要多不同的分辨率要对图片进行更换的话，通过设备像素比实现图片更换。以下是解决办法：
bg-image($url)
background-image url($url + "@2x.png")
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio)
background-image url($url + "@3x.png")
最后建议开发中采用百分百币局跟rem布局结合使用，当然flex布局也是可以。
五、具体适配实现要看设计稿给出来的模板而定。分享先到这里。