使用rem进行页面适配

拼搏现实的明天。 2023-08-17 16:27 114阅读 0赞

想到写这个博客的时候，网上很多已经在吵着都2019了，还在用rem，都在用vw，emmm

1.rem的原理

众所周知rem的原理就是，值根据html根元素的大小而定，改变html的font-size大小便可改变元素的大小。

2.原理大家都一样，主要在动态改变html的font-size大小时，每个人的习惯不太一样。

网上有很多类似的博客，方法也很多

1.使用媒体查询，类似这种

html{font-size:10px}
    @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
    @media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
    @media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
    @media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
    @media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
    @media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
    @media screen and (min-width:800px){html{font-size:25px}}

2.借助sass,less等，类似这种

@baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size
    .px2rem(@px){
        @return @px / @baseFontSize * 1rem;
    }
    //使用示例：
    .container {
        height: px2rem(240);
    }
    //less翻译结果：
    .container {
        height: 3.2rem;
    }

同时也要借助js动态设置html的font-size

let deviceWidth = document.documentElement.clientWidth;
    document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
      
    window.onresize = function(){
       let deviceWidth = document.documentElement.clientWidth;
       document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
    };

3.用工具，webpack，postcss,postcss-pxtorem

postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。

但配置好后，依然需要js来动态改变html的font-size

4.借助插件[https://github.com/imochen/hotcss][https_github.com_imochen_hotcss]

不管哪种方法，所基于的原理都是一样的，最后说下自己最常用的方法

css的calc和js

html{
        font-size: calc(100vw / 7.5);
    }

此时设计稿大小为750px，用/100的方式可以很容易进行rem的换算，几乎不需要借助其他工具，直接设计稿大小除以100即可，并不觉得麻烦，所以一直在用

转载于:https://www.cnblogs.com/Anne3/p/11189015.html

[https_github.com_imochen_hotcss]: https://github.com/imochen/hotcss