移动端rem布局

最新推荐文章于 2021-09-15 17:49:56 发布

原创最新推荐文章于 2021-09-15 17:49:56 发布 · 279 阅读

0 ·

CC 4.0 BY-SA版权

移动端开发专栏收录该内容

1 篇文章

订阅专栏

本文探讨移动端开发中常用的rem布局，解释rem作为度量单位的工作原理，并通过媒体查询和Sass实现动态字体及尺寸适配。通过js获取屏幕宽度设置html font-size，结合Sass编写函数实现px到rem转换，确保在不同设备上的自适应效果。

时隔半年，再次回顾移动端开发，感觉自己又张知识了~~~~~~

我们平常用的较多的单位是px,百分比，rem,em,vw,vh，但是在移动端用的比较多的还是rem，但是他在用的过程中要注意什么呢，怎么用呢，下面就开始啦。。。。。。

rem

他是一个度量单位，可以用他作为高宽，字体的单位。他以html中设置font-size的大小为基准，比如我们设置根元素html的font-size为12px,那么1rem = 12px。我们知道移动端中，不同手机，屏幕宽度是不一样的，所以在不同屏幕上，我们必须让字体，长宽都能自适应，那么我们得动态改变html的font-size的值去影响1rem的换算，那么我们代码中相应的长宽就会自动改变了。下面我们介绍几种方法。

媒体查询

我们设置不用屏幕大小和分辨率下，设置不同的字体大小

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

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

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

@media only screen and (min-width: 415px) {
    html {
        font-size: 23px;
    }
}

之前我觉得这样写，还挺好的，感觉没几行代码，但是自从接触到sass，我发现更强大的还是这个。不过用sass前先确认自己电脑有没有安装了npm和node，然后我在我项目文件下安装node-sass,命令行是npm install node-sass,然后在项目文件下新建test.scss，test.css,命令行输入node-sass test.scss test.css,就可以在我们test.css看到从scss转化为css的代码了，但是怎么动态改变我们rem的值呢，请看代码。
1.首先在我们js文件里面，获取我们当前手机屏幕的宽度，然后设置我们的html的字体大小为屏幕宽度/10后的取值

    //获取屏幕宽度
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;

    //获取dom html
    let htmlDom = document.getElementsByTagName('html')[0]

    //设置html的fontSize
    htmlDom.style.fontSize = htmlWidth / 10 + 'px';

2.在test.scss里面可以写函数，让px可以动态转化为rem

@function pxToRem($px) {
    $rem: 37.5px;
    @return ( $px / $rem)+rem
}

.box {
    width: pxToRem(100px);
    height: pxToRem(100px);
    background-color: red;
    &.item {
        width: pxToRem(50px);
        height: pxToRem(50px);
        background-color: blue
    }
}

3.node-sass test.scss test.css，查看test.css

.box {
  width: 2.66667rem;
  height: 2.66667rem;
  background-color: red; }
.box.item {
    width: 1.33333rem;
    height: 1.33333rem;
    background-color: blue;
 }