移动端前端适配方案（总结）

from:链接

1.Media Queries

meida queries 的方式可以说是最早期的移动端布局方式，它主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。核心语法是：

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  /*你的css代码*/
}

优点

• media query可以做到设备像素比的判断，方法简单，成本低，特别是对移动和PC维护同一套代码的时候。目前像Bootstrap等框架使用这种方式布局
• 图片便于修改，只需修改css文件
• 调整屏幕宽度的时候不用刷新页面即可响应式展示

缺点

• 代码量比较大，维护不方便
• 为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源
• 为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式

2.Flex弹性布局

以天猫的实现方式进行说明：
它的viewport是固定的：<meta name=“viewport” content=“width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no”>

高度定死，宽度自适应，元素都采用px做单位。

随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差不多，在哪个宽度需要调整的时候使用响应式布局调调就行（比如网易新闻），这样就实现了『适配』。

3.rem + viewport 缩放

这也是淘宝使用的方案，根据屏幕宽度设定 rem 值，需要适配的元素都使用 rem 为单位，不需要适配的元素还是使用 px 为单位。（1em = 16px）

PS：rem
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？
区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对
大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁
反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一
个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。比如：p{font-size:14px;font-size:0.875rem;}
(推荐一个单位转换的工具：http://pxtoem.com/)

实现原理

根据rem将页面放大dpr倍, 然后viewport设置为1/dpr.

如iphone6 plus的dpr为3, 则页面整体放大3倍, 1px(css单位)在plus下默认为3px(物理像素)
然后viewport设置为1/3, 这样页面整体缩回原始大小. 从而实现高清。

这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小，也就是device-width。
这个device-width的计算公式为：设备的物理分辨率/(devicePixelRatio * scale)，
在scale为1的情况下，device-width = 设备的物理分辨率/devicePixelRatio 。

4、rem实现

比如说“魅族”移动端的实现方式，viewport也是固定的：
<meta name=“viewport” content=“width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no”>。

通过以下代码来控制rem基准值(设计稿以720px宽度量取实际尺寸)

以下是控制1rem = 多少px的代码

//获取视窗宽度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;

//获取视窗高度
let htmlDom = document.getElementsByTagName('html')[0];

htmlDom.style.fontSize = htmlWidth / 10 + 'px';

window.addEventListener('resize', (e)=>{
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    htmlDom.style.fontSize = htmlWidth / 10 + 'px';
    console.log(htmlDom.style.fontSize)
});

以下是scss

//这里只是以iphone6作为基本设计搞，因为最终得出的单位是rem，而1 rem = 多少px 其实是我们在js代码中设置的，所以它依旧可以适配其他screen
//当改变屏幕宽度时，1 rem的实际大小被改变，同样的，实际的显示效果也会被改变
@function px2rem($px) {
  $rem : 37.5px;//不需要因为屏幕宽度的改变而改变
  @return ($px / $rem) + rem;
}

html {
  color: #f8f8f8;
}

.header {
  height: px2rem(40px);
  width: 100%;
  background-color: red;
  padding-left: px2rem(23px);
  box-sizing: border-box;
  .header-item {
    float: left;
    color: #ffcdce;
    font-size: px2rem(16px);
    margin-right: px2rem(20px);
    line-height: px2rem(40px);

    &:nth-child(2) {
      color: #fff;
      font-size: px2rem(16px);
    }
  }
}