移动端

Meta

<meta
      name="viewport"
      content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<meta
      name="apple-mobile-web-app-capable"
      content="yes">

解释

device-width 设备宽度
user-scalable=no 用户是否可以缩放
initial-scale=1.0 初始化缩放比例
maximum-scale=1.0 华为meta8
minimum-scale=1.0
shrink-to-fit  ios9中有个bug，用来识别屏幕的宽度
viewport-fit=cover 解决苹果X刘海的问题

针对苹果手机

name='apple-mobile-web-app-capable' content='yes'
可以把页面以app的方式添加到桌面
name='apple-touch-fullscreen' content='yes'
允许全屏显示
name='format-detection' content='telephone=no,email=no'
禁止识别数字为手机号或邮箱

相对单位

em

相对父元素的字体的大小, 默认浏览器 字体都是 16px 。不只是来设置字体，任何元素都可以设置

rem

root em 相对 html 根元素的大小，也可以用于设置 width 和 height

rem css3 新特性 相对 html 根节点的 font-size 的大小。 修改 html 的 font-size 就可以统一适配。

在全局（html）将 font-size 设为 62.5%， (16px => 100%, 1px => 6.25%, 10px=>62.5%).，就相当于 1rem = 10px 了。

vw (viewport-width)

1vw 可视窗口宽度的百分之一

vh (viewport-height)

1vh 可视窗口高度的百分之一

vmax

1vmax 是相对可视窗口中宽高最大的百分之一

vmin

1vmin 是相对可视窗口中宽高最小的百分之一