前端px rem vm理解

小吴学不会

已于 2023-04-18 17:20:52 修改

阅读量69

点赞数

文章标签：前端

于 2023-04-17 20:44:23 首次发布

本文链接：https://blog.csdn.net/qq_52556429/article/details/130208704

版权

文章介绍了在Vue结合Vant的项目中，如何使用base.scss文件进行响应式布局的字体设置。通过设置html的font-size基于viewport宽度动态调整，确保在不同设备上rem单位的适配。以iPhone6为例，详细解释了1rem的计算方法，并展示了如何根据UI设计稿转换像素到rem的规则，以实现设计稿与实际界面的一致性。

摘要由CSDN通过智能技术生成

学习vue+vant4
base.scss文件

*{
    margin: 0;
    padding: 0;
}
html, body , #app{
    height: 100% ;
}
html {
    //iphone6 375x667px
    //1vm=375px/100   就是屏幕最小宽度分成100份
    //html中，font-size设计的大小为1rem

    font-size:26.666vw;//fontsize动态，rem也会是动态
    //如果这里font-size是100px,1rem永远等于100px
    //如果fontsize是26.666vw,rem会适配不同机型的大小，1rem=26.666vw=26.666*(最小px/100)=0.26666*最小px
    //已知最小px和组件px,求组件rem,
    //组件rem=组件px/(0.26666*最小px)


    //设计时用iphone6 375x667px
    //因为UI设计稿可能会比实际大两倍
    //所以iphone6 750x1334px
    //所以1rem=26.666vw=26.666*(最小px/100)=0.26666*最小px=200px
    //所以组件rem=组件px/200
    }
body{
    font-size: .15rem ;//UI设计稿上显示30px,实际界面上显示15px
}