移动web开发适配利器—rem

作者: jia林 | 来源:发表于2018-02-04 18:28 被阅读0次

移动web开发适配利器—rem
有关Rem一些问题小总结
网络编程(九）移动端布局(3)
移动web开发适配rem
移动web开发与适配
rem的使用
2020-10-30 web移动端
移动web开发，rem适配布局
Rem布局
web移动端REM适配

移动web开发与适配

image.png

meadia也可以写在link里面：

<link rel="stylesheet" type="text/css" href="" media="screen and (max-width:320px)">  
//当屏幕小于等于320时，所使用的link

使用media时注意

/*当同时小于360px和320px时,应定义一个区间,否则将会覆盖*/
        @media screen and (max-width:360px) and (min-width:321px){
            /*code*/
        }

        @media screen and (max-width:320px){
            /*code*/
        }

rem

rem是 font size of the root element

image.png
rem和根元素的font-size有关
浏览器默认的1rem = 16px;

动态修改font-size

使用media

    @media screen and (max-width:360px) and (min-width:321px){
            html{
                                  font-size:22px;
                              }
        }

        @media screen and (max-width:320px){
            html{
                                  font-size:30px;
                              }
        }

使用js

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    .inner{
        width:2rem;
        height: 2rem;
        border:1px solid #ccc;
    }
    </style>
</head>
<div class="inner"></div>
<body>
<script type="text/javascript">
window.addEventListener('resize',function(){
    // 获取视窗宽度
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    //获取html
    let htmlDom = document.getElementsByTagName('html')[0];
    htmlDom.style.fontSize = htmlWidth / 10 + 'px';   //求出基准值 
})

</script>

</body>
</html>