页面分辨率兼容性处理

目前自己了解两种办法：

1.按设计稿进行固定尺寸开发，根据各种分辨率进行放大缩小zoom。

function bodyScale() {
    
    
    var devicewidth = document.documentElement.clientWidth; //获取当前分辨率下的可是区域宽度
    // var devicewidth = window.screen.width; //获取当前分辨率宽度
    var deviceheight = document.documentElement.clientHeight; //获取当前分辨率下的可是区域高度
    //var deviceheight = window.screen.height; //获取当前分辨率下的高度
    var scalex = devicewidth / 1920; // 分母——设计稿分辨率宽度的尺寸
    var scaley = deviceheight / 1080; // 分母——设计稿分辨率高度的尺寸
    //按照宽高比例小的来进行缩放
    scalex <= scaley ? document.body.style.zoom = scalex : document.body.style.zoom = scaley;
    //放大缩小相应倍数
}
bodyScale();

如果想要不留空白，可以让背景图片宽高都为100%铺满整个屏幕，然后让中间的部分垂直居中对齐。
宽高比例1.7777（1920x1080 1600x900 1360x768这个大概 1280x720）

2.使用rem

CSS3新增的元素，使用rem为元素设定字体大小时，相对大小对比的是HTML根元素
，只修改根元素就成比例地调整所有字体大小，除了IE8及更早版本外，所有浏览器均已支持rem。
第一步：先设置header里面的meta标签和script标签

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth / 1920*100 + 'px';
//document.documentElement.style.fontSize = window.screen.width / 1920 * 100 + 'px';
</script>

window.screen.width / 1920是计算当前屏幕和设计稿的比例大小，比如分辨率是960px，那么这个值应该为0.5。
之所以乘以100，是因为一般浏览器的最小字体是12px，如果这个数值就小于12px，会造成一些计算的错误，和一些奇怪的问题。注意谷歌浏览器支持的最小font-size大小为12px（如果有小于12px可以使用火狐查看）。

因为前面根元素乘以100，所以如果在960宽度分辨率里（此时根元素font-size为50px）一个设计稿div宽度为960px，那么应该除以100设置成9.6rem。1rem=fontSize，此时9.6X50=480px刚好是原来的一半。

第二步：把页面里所有的px都除以100转换成rem

如果没解决其他几种方式可以再尝试下：
1.响应式布局 Bootstrap
2.百分比布局
3.媒体查询 @media，使用 viewport，像素转换