rem适配

chrome浏览器字体默认16px 最小12px

em

参照当前元素自身或者继承来的font-size

rem

参照html根标签的font-size

rem适配

rem适配原理：改变了一个元素在不同设备上占据的css像素的个数
优点:可以使用完美视口
缺点:计算设计图上的px值到rem的转换比例麻烦
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
window.onload=function(){
        var styleNode = document.createElement('style');
        var w = document.documentElement.clientWidth/16+"px";
        styleNode.innerHTML="html{font-size:"+w+" !important;}"
        document.head.append(styleNode);
};

viewport

viewport适配原理:
      viewport适配方案中，每一个元素在不同设备上占据的css像素的个数是一样的。但是css像素和物理像素的比例是不一样的，所以是等比的
优点:不用计算元素在设计图上的比例
缺点:不能使用完美视口
//因为 screen.width有兼容性问题 所以先设置布局视口=理想视口 ,最终js取的布局视口值等同理想视口
<meta name="viewport" content="width=device-width" />
window.onload=function(){
        var targetW = 600;
        // 理想视口/设计图css值 = 缩放比例
        var scale = document.documentElement.clientWidth/targetW;
        var meta = document.querySelector('meta[name=viewport]');
        //将布局视口 视觉视口通过缩放比例 最终设置成 targetW
        meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no"
};

1物理像素的实现

//1.缩放页面实现
(function(){
        //通过DPR将页面缩放 使1个css对应1个物理像素
        var scale = 1/window.devicePixelRatio;
        var meta = document.querySelector('meta[name=viewport]');
        meta.content="width=device-width,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no"
        
        //rem适配
        var styleNode= document.createElement('style');
        var w =  document.documentElement.clientWidth /16+"px";
        styleNode.innerHTML="html{font-size:"+w+" !important;}";
        document.head.append(styleNode);
        
    })();
//2.媒体查询缩放元素实现
@media only screen and (-webkit-device-pixel-ratio:2 ) {
      #test{
            transform: scaleY(.5);
      }
}
@media only screen and (-webkit-device-pixel-ratio:3 ) {
      #test{
            transform: scaleY(.333333333333333333);
      }
}