[文章参考于](移动端适配的5种方案 - 掘金 (juejin.cn))

感谢作者大大，看此文章之前请先看上面链接中的文章，本文仅起到精简作用，方便回想。

在看适配方案前，请务必先看下面内容(新手向)

页面元素的rem值=页面元素值/html根标签的font-size大小；

页面元素的rem值=页面元素值/(屏幕宽度/划分的份数)

至于这个font-size大小到底是根据啥决定，本人认为无论是第一种还是第二种计算方法，本质上都是为了方便使用，所以就不需要说到底该划分多少份才行，直接以100份进行划分就可以。

接下来就是拿到设计稿，我们会看到设计稿的尺寸，移动端的设计稿宽一般是750px；而我们在开发中，一般会用iphone6-8的屏幕来开发，而当我们开发时会发现这里是375！！！

注意：这里的375的单位不是px，而是375pt(即750px)

原因就是：这里的375是逻辑像素，而750是物理像素，375pt=750px；所以这就是为什么设计稿是750px而开发时上面写着375的原因。

移动端视窗三个概念：

布局视窗：比移动端浏览器的可视区域大很多，即pc端网页直接在移动端展示，会出现横向滚动条。
视觉视窗：移动端显示页面的区域。
理想视窗：移动端屏幕的宽度，可将页面全部展示在视窗内。

例如： pc端网页是这样的：

而移动端如果打开pc端网页，则是这样的： (布局视窗即蓝色框，也就是有部分未显示；视觉视窗则是红色框内可以看到的视图区域）

移动端适配后： (即理想视窗，页面内容可全部展示)

viewport详细设置

通过设置 viewport 可以设置页面大小，通过 meta 标签可以设置 viewport 信息，代码如下：

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

适配方案

1.rem布局

css3规定：1rem大小就是根元素的font-size的值，通过设置font-size大小来控制整个html文档内的字体大小，元素宽高，内外边距等，根据移动设备的宽度大小来实现自适应，使得不同设备都展示一致的页面大小。

步骤如下：

作为前端开发者，首先要知道UI设计稿的宽度，比如320px或者640px或者750px；
增加脚本

    <script>
		/*设置根元素<html>字体大小*/
		function getRem() {
			var html = document.getElementsByTagName("html")[0]; /*获取标签元素<html>*/
			var oWidth = document.body.clientWidth || document.documentElement.clientWidth; /*获取设备的宽度  ||后为兼容IE低版本写法*/
			html.style.fontSize = oWidth / 6.4 + "px"; /*设置根元素<html>字体大小   计算出的值 就相当于1rem;为什么？ 这就是rem单位的规定 1rem就等于根元素<html>字体大小*/
		}

		/*6.4: 为设计稿宽度640px; 若是750px的设计稿 只需要将6.4改为7.5即可。
		 * 在手机屏幕宽度与设计稿一致时，即：oWidth = 750px 那么上面的计算 oWidth / 6.4 + "px" 结果就是100px;  html.style.fontSize = 100px 
		 *css3中规定 1rem就对应这<html>的font-size的大小，所以100px = 1rem 这样方便大家将px转化为rem 按照这个比例来设置字体大小、元素宽高、内外边距等的单位为rem;
		 *举例：在设计稿中，某一行字体大小为14px,则我们需要在css文件中将对应的字体设置为0.14rem;
		 *      在设计稿中，某一个元素宽高分别为 100px与20px;则我们需要在css中将对应的宽高设置为1rem与0.2rem;
		 */

		/*页面初始化调用getRem()*/
		window.onload = function() {
			/*初始化*/
			getRem();
			/*getRem绑定监听*/
			window.addEventListener("resize", getRem, false);
		};
	</script>

css文件中单位都要用rem。

或者可以使用插件来进行px和rem的转换

2.vw、vh布局

vw、vh是将页面分为100份，即1vw = device-width/100

以上两种方法均可以使用postcss-pxtorem来进行单位转换

ps：当我们拿到设计稿后，我们可以清除的看到某个盒子的大小，但是在写样式的时候，我们是根据他的内外编剧padding、margin来写，然后实现盒子大小自适应，大多数情况下盒子的宽高是不需要写死的，具体要不要给盒子设置具体的宽高，那就要看实际情况是否需要了。

3.百分比布局

对于不需要特定宽高的盒子是我们可以使用百分比布局，并且子盒子的百分比的参考对象是相对于父盒子而言，且盒子嵌套过深会出现问题。

4.响应式布局

通过媒体查询，可以针对不同的屏幕进行单独设置，但是针对所有的屏幕尺寸做适配显然是不合理的，但是可以用来处理极端情况（例如 IPad 大屏设备）或做简单的适配（隐藏元素或改变元素位置）

媒体查询案例：

body {
  background-color: yellow;
}
/* 针对大屏产品 ipad pro */
@media screen and (min-width: 1024px) {
    body {
      background-color: blue;
    }
}

5.px 为主，搭配 vw/vh、媒体查询与 flex 进行布局

编写 <meta> 标签设置 viewport 的内容 width=device-width，让网页宽度等于视窗宽度
在 css 中使用 px
在适当的场景使用flex布局，或者配合vw进行自适应
在跨设备类型的时候（pc <-> 手机 <-> 平板）使用媒体查询
在跨设备类型如果交互差异太大的情况，考虑分开项目开发

移动端适配的五种方案