使用rem前的准备：

• 如果是移动端，添加name="viewport"的meta标签，其中的属性数值根据实际需求而定：
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

rem布局：

两个常用方法：（视情况选其一使用）

• 通过document.body.clientWidth获取网页可见区域的宽度,
• 通过window.screen.width获取设备宽度

meta标签详解和常用属性

• 概念： 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。
  它根据name的不同，提供各种功能。
• 常用属性：
  1. name="viewport" 用于移动端显示优化（通常直接复制下面代码使用即可）
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
     * content里的属性：
     width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
     initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
     minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
     maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
     height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
     user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
  2. 移动端其他优化：
  1. 描述、搜索优化：
     实例 1 - 定义文档关键词，用于搜索引擎：
     <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
     实例 2 - 定义web页面描述：
     <meta name="description" content="Free Web tutorials on HTML and CSS">
     实例 3 - 定义页面作者：
     <meta name="author" content="Hege Refsnes">
     实例 4 - 每30秒刷新页面：
     <meta http-equiv="refresh" content="30">

本文部分知识点来源于