移动端是怎么做适配的

一、meta viewport

在 html 文件的 head 里面添加以下代码

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

可以使页面大小和设备一样大，且用户无法进行缩放。

其中 content 属性值：

• width: 可视区域的宽度，值可为数字或关键词 device-width 表示和设备一样宽
• user-scalable: 是否可对页面进行缩放，no 表示禁止缩放
• intial-scale: 页面初始的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
• maximum-scale: 页面最大可缩放比例
• minimum-scale: 页面最小可缩放比例

二、media query（响应式）

语法一：

<style>
@media (条件) and (条件) {
  样式
}
</style>

满足小括号里的条件时，就执行花括号里的样式。

语法二：

<link rel="stylesheet" href="style.css" media="(条件)">

满足条件时，style.css 会生效。要注意，无论条件是否满足，style.css 始终都会下载。

三、动态 REM

1 rem 等于页面根元素 html 的 font-size值。
在 head 中写上以下代码

<script>
  var pageWidth = window.innerWidth
  document.write('<style>html{font-size:' + pageWidth + 'px;}</style>')
</script>

这样，1 rem === html 的 font-size === pageWidth，需要动态适配的元素都可以用 rem 作单位。