美文网首页
CSS rem布局

CSS rem布局

作者: 椰果粒 | 来源:发表于2019-06-25 17:13 被阅读0次

    1. 什么是rem

    • rem是CSS3新增的相对单位,root em,也就是根em
    • 使用rem为元素设定大小时,相对的是HTML根元素。
    • 优点1:可以只修改根元素的字体,来成比例的改掉所有元素的字体
    • 优点2:可以避免字体逐层复合的反应

    2. 使用rem

    当HTML根的字体大小 font-size=16px时,我们如果想要一个12px大小的字体,就可以设置成12/16 = 0.75px的大小。

    为了方便计算,我们可以设置HTML的字体为font-size=10px,这样12px的字体就可以写成1.2rem了。
    或者设置font-size=62.5%,也可以写成1.2rem了

    这里的62.5%是怎么计算出来的?
    10/0.625 = 16
    网页默认的字体大小是16px

    如果根节点没有设置font-size,那么1rem = 16px

    3. 实例展示

    3.1. 看小说时,小中大三种展示方式

    3.2. 移动端开发技巧

    使用rem进行自适应布局的关键就是给HTML赋值一个动态的font-size。
    不同的手机分辨率不同,需求是寻找最佳视觉效果

    一般移动端的设计稿会采用iPhone6宽度像素尺寸作为标准(750px)。

    ️以750设计稿为例
    首先将html的font-size设置为100vw/7.5,这时候1rem=100px了

    之后将所有的px换成rem。

    低版本不支持rem,则用js来做

    document.documentElement.style.fontSize = window.innerWidth/7.5 + "px"
    
    

    相关文章

      网友评论

          本文标题:CSS rem布局

          本文链接:https://www.haomeiwen.com/subject/psltcctx.html