vue项目中如何使用rem替换px

小天博客 • 07/20 10:26 • 开发 • 阅读 23

这篇文章主要讲解了“vue项目中如何使用rem替换px”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue项目中如何使用rem替换px”吧！vue-cli:使用脚手架来搭建vue前端项目
postcss:就是postcss用js插件帮你转换css样式的一个工具。比如，这里的把你的文件里面16px替换成1rem(根大小默认16px的情况）；这样你就不用自己去算了！
cssrem:主要是帮你把px(UI设计给设计稿上的px)转换成对应的rem
然后：还要用js代码去动态算根目录应该有的字体大小，反正就是一段js代码去动态获取屏幕宽度然后再index.html里面加上
当你切换不同尺寸的屏幕的时候，需要动态改变根字体的大小，一段简单的js插入在head里面：在public目录下直接新建的shipei.js,然后将这个js引入到index.html的head里面注意放到 public 里的东西，可以不用写开头目录，脚手架打包的时候找不到，会去public文件夹找的getBoundingClientRect().width获取到的其实是父级的右边免费云主机域名距离浏览器原点(0,0)左边距离浏览器原点(0,0)的距离,即父级的宽度+2padding+2border。
此时的clientWidth等于父级的宽度+2*padding,不包括边框的宽度。
当不隐藏子级内容,即overflow为auto时，前者的宽度依然为这个数字,因为父级并没有改编盒模型。后者的宽度为上述得到的宽度-滚动条的宽度(17px);运行结果是clientWidth为516,他的计算是内容宽+2padding
getWidth(也就是getBoundingClientRect().width）包括内容宽+2padding+2border
第五步：就是将设计稿上的px转换成rem为单位：安装 cssrem插件 (在插件市场）：然后在文件–>首选项–>设置然后搜索cssrem 设置Root Font Size为16即可感谢各位的阅读，以上就是“vue项目中如何使用rem替换px”的内容了，经过本文的学习后，相信大家对vue项目中如何使用rem替换px这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是百云主机，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关推荐: Pytho的HTTP 交互httpx包模块怎么使用

本篇内容介绍了“Pytho的HTTP交互httpx包模块怎么使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！Python 的httpx包是一个复杂的 Web …