前端不同分辨率适配

方法1：

很取巧的方式，就是按设计稿开发好固定尺寸的页面后，然后根据各种分辨率进行放大缩小。

// 优点：不用考虑适配问题，按设计稿进行固定尺寸开发
function bodyScale() {
var devicewidth = document.documentElement.clientWidth;//获取当前分辨率下的可是区域宽度
var scale = devicewidth / 1366; // 分母——设计稿的尺寸
document.body.style.zoom = scale;//放大缩小相应倍数
}
bodyScale();

方法2：

rem布局
根据分辨率的宽度，计算当前屏幕的分辨率宽与设计图宽一个比例值
例如
设计图宽 1366
实际屏幕 1920
比例值 1920/1366

然后把这个比例值赋给body的font-size

第一步：给body设置font-size：XXpx; （XX是计算得出的）
第二步：对照设计图开发页面时: 设计图是多少px，写css写成多少rem即可

该设置有个坑，就是在低版本浏览器，大概版本号70多的chrome不支持body设置font-size设置的1px, 最小支持12px, 写成1px虽然方便，最好是写成20px,100px等好换算的单位。