HTML5 移动页面自适应手机屏幕四类方法
使用meta标签：viewport
viewport是用户网页的可视区域。翻译为中文叫做“视区”
手机浏览器是把页面放在一个虚拟的“窗口”（viewpoint）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中，用户可以通过平移和缩放来看网页的不同部分。
viewport的代码如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
每个属性的介绍如下：
| 属性名 | 取值 | 描述 |
|---|---|---|
| width | 正整数 或 device-width | 定义视口的宽度，单位为像素 |
| height | 正整数 或 device-height | 定义视口的高度，单位为像素，一般不用 |
| initial-scale | [0.0 - 10.0] | 定义初始缩放值 |
| minimun-scale | [0.0 - -10.0] | 定义缩小最小比例，它必须小于或等于maximun-scale的设置 |
| maximun-scale | [0.0 - 10.0] | 定义放大最大比例，它必须大于或等于minimun-scale设置 |
| user-scalable | yes/no | 定义是否允许用户手动缩放页面，默认值yes |
使用css3单位：rem
em是CSS3新增的一个相对单位（root em，根em）,使用rem为元素设定字体大小时，是相对大小，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：
p {font-size:14px; font-size:.875rem;}
默认html的front-size是16px，即1rem=16px，如果某div宽度为32px你可以设置为2rem。
通常情况下，为了便于计算数值则使用62.5%，即默认的10px作为技术。当然这个基数可以为任何数值，视具体情况而定。设置方法如下：
html { font-size:62.5%(10/16*100%) }
具体不同屏幕下的规则定义，即基数的定义方式：可以通过CSS定义，不同宽度范围里定义不同的基数值，当然也可以通过js一次定义方法如下：
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; //其中“20”根据你设置的html的font-size属性值做适当的变化
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
使用媒体查询
媒体查询也是css3的方法，我们要解决的问题是适应手机屏幕，这个媒体查询正是为解决这个问题而生。媒体查询的功能就是为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等。
例如：如果浏览器窗口小于 500px, 背景将变为浅蓝色：
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
使用百分比
百分比指的是父元素，所有百分比都是这样的。子元素宽度50%，那么父元素的宽度就是100%；
所以body默认宽度是屏幕宽度（PC中指的是浏览器宽度）子孙元素按百分比定位（或指定尺寸）就可以了，这只适合布局简单的页面，复杂的页面实现很困难。
原文发布时间为：2017年12月24日
原文作者：娜娜娜娜
本文来源前端乱炖如需转载请联系原作者