移动端到底如何适配？

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金

前两篇写到了《为什么移动端不能像pc网站一样写》和《乔布斯提出的视网膜屏幕是什么概念呢？》连载阅读体验更佳，了解一下移动端的来世今生的发展，接下来说一下移动端到底如何适配。

适配

视口设置

想要更改布局视口，利用meta标签的viewport来进行设置，除此之外，还可以进行页面的缩放等操作。

viewport相关配置

属性	值	描述
width	正整数或 device-width	以像素为单位，定义布局视口的宽度
height	正整数或 device-height	以像素为单位，定义布局视口的高度
initial-scale	允许是小数	定义页面初始缩放比例
minimum-scale	0.0 - 10.0	定义缩放的最小值
maximum-scale	允许是小数	定义缩放的最大值（ios10&ios10+无效）
user-scalable	yes / no	设置是否允许缩放，同上无效

initial-scale = 设备独立像素 / 视觉视口宽度

视觉视口宽度 = 设备独立像素 / initial-scale

注意事项：

ios10 及 ios10+ 设置最大缩放值无效
initial 和 width 是有冲突的
initial 和最小值是一致的
部分安卓机型，不接受width = 具体数值这样的操作

正常情况下，我们会把初始、最小、最大都设置为1，不允许用户缩放页面。但是因为maximum无效，后期，我们会通过 js 来禁止缩放

视口设置：

<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
复制代码

根据像素比进行适配

这种方式，采用的是，直接写物理像素，还是以 iphone6 为例

iphone6
物理像素	750 * 1334
像素比	2
设备独立像素	375 * 667

布局视口 = 物理像素

<script>
    var meta = document.createElement('meta');
    var scale = 1 / window.devicePixelRatio;
    meta.name = "viewport";
    meta.content="initial-scale="+ scale +",minimum-scale="+ scale+",maximum-scale="+ scale+",user-scalable=no";
    document.head.appendChild(meta);
</script>
复制代码

缺点：非常明显，在写的时候必须要写物理像素，但实际我们设计图上拿到的，都是css像素

像素的处理是完成了，但是移动端的适配可没有这么简单哦~ 为什么呢？

同样一个元素，在414 * 736占了屏幕宽度的一半，但是在320*480的屏幕超出了一半，这会产生什么问题？

按照大屏幕尺寸写，本应该一排显示的内容，在小屏幕因宽度不够，掉下去了
按照小屏幕写，那你告诉我，我买个大屏是为了什么

所以这种时候，我们就要对屏幕来进行适配：

换句话说，就是一个元素，小屏手机，我就显示小点，大屏手机，我就显示大点

那么想要做到这点，我们就要来学习以下的内容~ 赶紧来看看~

rem适配

什么是rem？不觉得它和 em 长的很像么？

回顾 em

公式：1em = 1 font-size大小

<style>
    body{
        font-size: 20px;
    }
    div{
        font-size: 15px;
        width: 5em;
        height: 5em;
        background: rebeccapurple;
    }
</style>
复制代码

width = 15 * 5 = 75px;

缺点：font-size 经常会修改，em是根据当前自身的font-size进行计算的，很容易宽高就发生变化。

基于这个问题，我们就要来学习一个新的单位了，叫做 rem

rem -> root em 其实翻译过来就是根据根节点计算em，这里的根节点指的是<html></html>

<style>
    html{
        font-size: 20px;
    }
    div{
        font-size: 15px;
        width: 5em;
        height: 5em;
        background: rebeccapurple;
    }
</style>
复制代码

width = 20* 5 = 100px;

但是好像~ 并改变不了我们上面提到的问题啊.....别着急！那是因为你还没有让font-size变化起来

利用js动态设定font-size

<script>
    var html = document.documentElement;
    var widths = html.clientWidth;
    var num = 10;
    html.style.fontSize = widths / num + 'px';
</script>
复制代码