H5屏幕适配的方法
1、流式布局
2、固定宽度
3、响应式
4、通过viewport进行缩放（推荐）
5、使用rem（推荐）
流式布局：
通过百分比来划分区域尺寸（搭配min-width、max-width等属性使用，例如，设置网页主体的width:80%;min-width:320px；图片:width:100%, max-width:一般设定为图片本身的尺寸(防止被拉伸而失真）但是高度大都依旧使用px来固定
问题:在大屏幕的手机下显示效果宽度会拉长，但是高度,字体不变，实际显示会很不协调，这就是流式布局的最致命的缺点
固定宽度：
将页面设置固定宽度，两侧留白，简单方便。例如：width:320px;margin:0 auto;这样做视觉
问题：大屏幕手机下两边是留白比较大，视觉效果差，页面小，操作按钮小，不方便操作
响应式：
媒体查询，根据不同分辨率设备做不同处理
问题：兼容各种设备工作量大，效率低下；代码累赘，会出现隐藏无用的元素，加载时间加长；一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
对viewport进行缩放：
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,
maximum-scale=1.0,minimum-scale=1.0">
该方法简单、粗暴、高效。以320宽度为基准，对viewport进行缩放，同时可以解决ios下1px问题
问题：部分缩放会导致有些页面元素模糊
(function(win, doc) {
var isIOS = win.navigator.appVersion.match(/iphone/gi);
var isAndorid = win.navigator.appVersion.match(/android/gi);
var deviceDpr = win.devicePixelRatio;
var setDpr = 1;
var scale = 1;
var rootEle = doc.documentElement;
var viewport = doc.querySelector('meta[name="viewport"]');
// 只针对ios进行处理
if (isIOS) {
if (deviceDpr >= 3) {
setDpr = 3;
} else if (deviceDpr >= 2) {
setDpr = 2;
} else {
setDpr = 1;
}
} else {
// 对安卓及其他设备设置dpr为1
setDpr = 1;
}
if (!viewport) {
viewport = doc.createElement('meta');
viewport.setAttribute('name', 'viewport');
viewport.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=' + 'no, uc-fitscreen=yes');
if (!rootEle.firstElementChild) {
var wrapper = doc.createElement('div');
wrapper.appendChild(viewport);
doc.write(wrapper.innerHTML);
} else {
rootEle.firstElementChild.appendChild(viewport);
}
} else {
// 如果页面已经设置了viewport，则对viewport进行更改
viewport.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no, uc-fitscreen=yes');
}
rootEle.setAttribute('style', 'font-size: ' + 16 * setDpr + 'px;');
window.DPR = setDpr;
})(window, window.document);
rem:
rem是相对于根元素<html>计算大小的，这样就意味着，我们只需要在根元素确定一个大小，rem则可以来算出元素的宽高
根据媒体查询，更改html的font-size即可，利用rem则可达到自适应的目的
问题：最小颗粒为1px（ios8开始支持0.5），在Retine屏的分辨率始终是普通屏幕的2倍，视觉效果会变粗
/*移动端适配 width|height|font-size = 视觉稿量出来的值 / 100rem;*/
@media screen and (max-width:359px) and (min-width:320px) {
html,body{
font-size: 50px !important;
}
}
@media screen and (max-width:374px) and (min-width:360px) {
html,body{
font-size: 56.25px !important;
}
}
@media screen and (max-width:413px) and (min-width:375px) {
html,body{
font-size: 58.5px !important;
}
}
@media screen and (max-width:639px) and (min-width:414px){
html,body{
font-size: 64.6px !important;
}
}
@media screen and (min-width:640px) {
html,body{
font-size: 100px !important;
}
}
每一个方法都有自己的优势和缺点，根据自己的业务场景选择即可
