vue使用rem适配的案例

　　介绍

小编给大家分享一下vue使用rem适配的案例,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

1。开发环境vue
2。电脑系统windows10专业版
3。在使用vue开发移动端的过程中,我们会因为兼容性而头疼,下面我来分享分享下面vue使用雷自适配,希望对你有所帮助。
4。废话不多说,直接上操作:

//安装,postcss-pxtorem 　　npm 小姐:postcss-pxtorem  s

5。在src目录新建rem文件夹,下面新建快速眼动。js,添加如下代码:

//基准大小 　　const  baseSize =37.5//,设置,rem 函数 　　function  setRem (), { 　　,const  salepro =document.documentElement.clientWidth /, 750 　　,//当前页面宽度相对于,750,宽的缩放比例,可根据自己需要修改。 　　,//设置页面根节点字体大?,document.documentElement.style.fontSize  (baseSize  *, Math.min (salepro, 2)), +, & # 39; px # 39; 　　}//,初始化 　　setRem ()//,改变窗口大小时重新设置,快速眼动 　　时间=window.onresize  function  (), { 　　,setRem () 　　}

6。在项目根目录新建.postcssrc。js,添加代码如下:

module.exports =, { 　　,“plugins": { 　　,“postcss-pxtorem": { 　　“rootValue"才能:,37.5, 　　“propList"才能:,(“*”) 　　,} 　　,} 　　}

注意:我在配置中,比例是1:1,也就是设计图宽是750 px,你在css中直接写宽度:750 px;就可以啦,不用进行换算,是不是很棒。

7。在主要。js中引入

import  & # 39; @/rem rem.js& # 39;

8。在vue模板中使用,css中添加如下代码:

& lt; style  lang=皊css", scoped> 　　.about  { 　　,宽度:750 px; 　　,身高:100 vh; 　　,box-sizing: border-box; 　　,背景颜色:blue  !重要; 　　,.kk  { 　　,,宽度:350 px; 　　,,身高:350 px; 　　,,背景颜色:红色; 　　,} 　　} 　　& lt;/style>

9。效果图如下:

vue使用rem适配的案例

10。本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。

看完了这篇文章,相信你对“vue使用rem适配的案例”有了一定的了解,如果想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!

vue使用rem适配的案例