vue项目中如何使用rem替换px
这篇文章主要讲解了“vue项目中如何使用rem替换px”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue项目中如何使用rem替换px”吧!
专注于为中小企业提供网站制作、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业兴宁免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上1000家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
工具
vue-cli:使用脚手架来搭建vue前端项目
postcss:就是postcss用js插件帮你转换css样式的一个工具。比如,这里的把你的文件里面16px替换成1rem(根大小默认16px的情况);这样你就不用自己去算了!
cssrem:主要是帮你把px(UI设计给设计稿上的px)转换成对应的rem
然后:还要用js代码去动态算根目录应该有的字体大小,反正就是一段js代码去动态获取屏幕宽度
安装插件
npm i postcss,postcss-pxtorem,postcss-loader,postcss-import,postcss-url
然后再index.html里面加上
在项目根目录下添加.postcssrc.js文件
module.exports = { "plugins": { "postcss-import": {}, //用于@import导入css文件 "postcss-url": {}, //路径引入css文件或node_modules文件 "postcss-aspect-ratio-mini": {}, //用来处理元素容器宽高比 "postcss-write-svg": { utf8: false }, //用来处理移动端1px的解决方案。该插件主要使用的是border-image和background来做1px的相关处理。 "postcss-cssnext": {}, //该插件可以让我们使用CSS未来的特性,其会对这些特性做相关的兼容性处理。 "postcss-px-to-viewport": { //把px单位转换为vw、vh、vmin或者vmax这样的视窗单位,也是vw适配方案的核心插件之一。 viewportWidth: 750, //视窗的宽度 viewportHeight: 1334, //视窗的高度 unitPrecision: 3, //将px转化为视窗单位值的小数位数 viewportUnit: "vw", //指定要转换成的视窗单位值 selectorBlackList: [".ignore", ".hairlines"], //指定不转换视窗单位值得类,可以自定义,可以无限添加 minPixelValue: 1, //小于等于1px不转换为视窗单位 mediaQuery: false //允许在媒体查询中使用px }, "postcss-viewport-units":{}, //给vw、vh、vmin和vmax做适配的操作,这是实现vw布局必不可少的一个插件 "cssnano": { //主要用来压缩和清理CSS代码。在Webpack中,cssnano和css-loader捆绑在一起,所以不需要自己加载它。 preset: "advanced", //重复调用 autoprefixer: false, //cssnext和cssnano都具有autoprefixer,事实上只需要一个,所以把默认的autoprefixer删除掉,然后把cssnano中的autoprefixer设置为false。 "postcss-zindex": false //只要启用了这个插件,z-index的值就会重置为1 } } }
当你切换不同尺寸的屏幕的时候,需要动态改变根字体的大小,一段简单的js插入在head里面:在public目录下直接新建的shipei.js,然后将这个js引入到index.html的head里面
//shipei.js (function() { function autoRootFontSize() { document.documentElement.style.fontSize = Math.min(screen.width,document.documentElement.getBoundingClientRect().width) / 750 * 32 + "px"; // 取screen.width和document.documentElement.getBoundingClientRect().width的最小值;除以750,乘以32;懂的起撒,就是原本是750大小的32px;如果屏幕大小变成了375px,那么字体就是16px;也就是根字体fontSize大小和屏幕大小成正比变化!是不是很简单 } window.addEventListener("resize", autoRootFontSize); autoRootFontSize(); })();
index.html
favicon.ico" rel="external nofollow" ><%= htmlWebpackPlugin.options.title %>
注意 放到 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这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
当前名称:vue项目中如何使用rem替换px
文章源于:http://scyanting.com/article/jhjhgj.html