移动端是怎么做适配的？

概念

1. 移动端
   所谓移动端，就是指移动设备的页面，与之相对的称为桌面端页面，也称为PC端页面
2. 适配
   适配是一种自适应方案，用来解决由于终端众多导致的页面尺寸问题

---

移动端适配方法

1、用meta标签

在head标签中添加meta标签，代码如下

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0>

该mate标签的属性内容解释如下

 name="viewport"       //命名该meta标签
 width=device-width    //宽度等于设备宽度https://www.cnblogs.com/2050/p/3877280.html
 user-scalable=no      //用户不可以伸缩页面
 initial-scale=1.0     //初始比例1.0
 maximum-scale=1.0     //最大比例1.0
 minimum-scale=1.0     //最小比例1.0

拓展：

• 移动前端开发之viewport的深入理解
• 如何通过meta标签来控制viewport–MDN

2、媒体查询

这里引用MDN的一段话来解释何为媒体查询

媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。
媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。

媒体查询具体体现在两个标签中，第一个标签是<link>，第二个标签则是<script>

• <link>中的媒体查询

<link media="(max-width: 800px)" href="example.css" />

该link标签所表达的内容为：当前页面小于800px时，执行example.css

max-width可以理解成页面最大宽度可以为800px，当宽度超过800px时，最大宽度肯定超过800px，故当前页面小于800px为ture，若超过800px则为false

• <script>中的媒体查询

<style>
	@media (max-width:320px){
	    body{background:red;}
}
<style>

在以上style标签内中，@media关键字表示开始媒体查询，用法相当于if…else，在( )内填入条件判断，在{ }内填入执行样式表

注意

• 在link标签中，无论条件判断是否为ture，样式表都会被下载，只是不执行
• 在style标签中，媒体查询遵循CSS样式表覆盖规则

拓展:

• CSS媒体查询
• CSS样式表覆盖规则

3、动态rem方案

在HTML中，有三种排版单位，分别是 px，em和rem。

px，全称是"pixel"，中文翻译为像素，是最常见的图片单位，通常在HTML中都是使用该单位进行距离和尺寸量化，但当涉及到多种不同窗口尺寸，确定的像素单位不能很好的展现页面。

em ，是一种相对单位，作用时相对于父元素的尺寸进行倍数变化，例如父元素是10px，则子元素的1em相当于10px，2em相当于20px，当px不能很好的适应多终端时，就可使用em作为替换单位。但当多个父元素叠加的时候，em会变得难以调整。

rem，全称是"root em"，是一种相对于根元素（HTML）的一种相对单位，它相对于根元素的属性font-size的值，大多数浏览器默认font-size值为16px，针对这一点，我们就可以用rem来做终端适配。

• 如何使用rem来进行适配

    var pageWidth = window.innnerWidth 
    //返回窗口的文档显示区的宽度。
    document.write('<style>html{font-size:' + pageWidth/10 + 'px;'}	</style>')
    //设置html的font-size为显示区宽度的0.1倍

这样，1rem单位就就始终等于显示区宽度的0.1倍了。

要注意的一点是，若显示区宽度过小，使得转换后HTML的font-size小于12px的话，会在Google Chrome浏览器报错，可以在转换前添加一个条件判断，使当前font-size若小于12px便等于12px。

拓展：

• 用SCSS计算rem