移动端的rem屏幕适配css文件 于蓝湖配合使用 pc端和移动端的适配，写两套css

 1.375px宽度设计稿对应22px=1rem

设置蓝湖的自定义css rem 点击确定就可以直接看到计算好的rem值。非常方便

效果：

@media only screen and (min-width: 320px) {
    html {
        font-size: 18.773px !important
    }
}
@media only screen and (min-width: 340px) {
    html {
        font-size: 20px !important
    }
}
@media only screen and (min-width: 360px) {
    html {
        font-size: 21px !important
    }
}

@media only screen and (min-width: 375px) {
    html {
        font-size: 22px !important
    }
}

/*@media only screen and (min-width: 376px) {
    html {
        font-size: 23px !important
    }
}*/

@media only screen and (min-width: 414px) {
    html {
        font-size: 24.288px !important
    }
}

@media only screen and (min-width: 641px) {
    html {
        font-size: 37.6px !important}
}
@media only screen and (min-width: 750px) {
    html {
        font-size: 44px !important}
}
@media only screen and (min-width: 800px) {
    html {
        font-size: 45px !important}
}

字体使用rem适配

 

2.图标清晰度

@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border {
        background:url(xxxxx@2x.png)
    }
}

@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border {
         background:url(xxxxx@3x.png)
    }
}

css代码可以检测2倍屏和三倍屏，不同屏幕对应不同的图标，实现适配多倍屏幕清晰度

 

3.宽度可以使用百分比宽度width:80%

 

4.高度可以使用视口高度80vh，占屏幕高度80%。

实现屏幕适配。

5.检测屏幕

 <script>
        /**
         * 判断是否是pc设备
         */
        function IsPC() {
            var userAgentInfo = navigator.userAgent;
            var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
            var flag = true;
            for (var v = 0; v < Agents.length; v++) {
                if (userAgentInfo.indexOf(Agents[v]) > 0) {
                    flag = false;
                    break;
                }
            }
            return flag;
        }
        if(IsPC()){
            console.log("pc端");
            //写pc端js代码
            var head = document.head || document.getElementsByTagName('head')[0];
            head += '<link rel="stylesheet" href="css/pcIndex.css" />';
            document.getElementsByTagName('head')[0].innerHTML += head;
        }else{
            console.log("移动端");
            var head = document.head || document.getElementsByTagName('head')[0];
            head += '<link rel="stylesheet" href="css/mobileIndex.css" />';
            document.getElementsByTagName('head')[0].innerHTML += head;
        }

    </script>

6.移动端html设置font-size: 13.33vw的传说，

依然写的都是13.33vw，那这个13.33是怎么来的呢？

    如果你了解设计稿你就懂了，其实很简单：
首先要先说明：移动端的设计稿一般是width：750px，height：auto（这里指的是不确定），100vw = 100%，这个也没有问题吧；那么，设计稿拿过来，我们可以得出：750px = 100vw，这个也没有问题吧，那么1px等于多少vw呢？ 是不是 1px = 100 / 750 vw = 0.13333vw；那么100px = 多少vw呢，这个应该知道了吧。100px = 13.33vw；

思路过程：

mobile.width = 750px  => 750px = 100% =100vw => 750px = 100vw => 1px = 0.1333vw => 100px = 13.33vw => 1rem =100px;

即：我们把html:{font-size: 13.33vw} // 也就是以100px位基准；1rem = 100px;

现在就好算多了；移动端的尺寸 / 100  =  XXX rem；
————————————————
版权声明：本文为CSDN博主「chi1130」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/chi1130/article/details/82844489

 

7.

大于750宽度的屏幕，字体图片不会再放大。小于750，大小随宽度改变而改变

window.onload = function(){    
getRem(750,100)
};
window.onresize = function(){    
getRem(750,100)
};
function getRem(pwidth,prem){
    var html = document.getElementsByTagName("html")[0];
         var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
    if(oWidth>=750){
        html.style.fontSize = "100px";
    }else{
        html.style.fontSize = oWidth/pwidth*prem + "px";
    }
             }