vue使用rem实现 移动端屏幕适配

要想移动端适配 并使用 rem  您需要先看这篇文章，配置好less ➡️ 在vue 中使用 less，就可以使用rem了

如果项目已经开发的差不多了，没有用到rem 又要使用rem，您用这招。

postcss-pxtorem：转换px为rem的插件

安装 postcss-pxtorem

前端精品教程：百度网盘下载

npm install postcss-pxtorem --save

 

新建rem.js文件

const baseSize = 32
// 设置 rem 函数
function setRem () {
 // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
 const scale = document.documentElement.clientWidth / 750
 // 设置页面根节点字体大小
 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
 setRem()
}

并引用进main.js文件内

import './rem'

 修改.postcssrc.js 文件

前端精品教程：百度网盘下载

在.postcssrc.js文件内的 plugins 添加以下配置，配后就可以在开发中直接使用 px 单位开发了

"postcss-pxtorem" : {
 "rootValue" : 32,
 "propList" : [ "*" ]
}

helloworld.vue

</code> </div> <div class="line number8 index7 alt1"> <code class="js spaces"> </code> <code class="js plain">export </code> <code class="js keyword">default</code> <code class="js plain">{</code> </div> <div class="line number9 index8 alt2"> <code class="js spaces"> </code> <code class="js plain">name: </code> <code class="js string">'HelloWorld'</code> <code class="js plain">,</code> </div> <div class="line number10 index9 alt1"> <code class="js spaces"> </code> <code class="js plain">data() {</code> </div> <div class="line number11 index10 alt2"> <code class="js spaces">  </code> <code class="js keyword">return</code> <code class="js plain">{</code> </div> <div class="line number12 index11 alt1"> <code class="js spaces">  </code> <code class="js plain">msg: </code> <code class="js string">'Welcome to Your Vue.js App'</code> </div> <div class="line number13 index12 alt2"> <code class="js spaces">  </code> <code class="js plain">}</code> </div> <div class="line number14 index13 alt1"> <code class="js spaces"> </code> <code class="js plain">}</code> </div> <div class="line number15 index14 alt2"> <code class="js spaces"> </code> <code class="js plain">}</code> </div> <div class="line number16 index15 alt1"> <code class="js plain">

</code> </div> <div class="line number19 index18 alt2"> <code class="js spaces"> </code> <code class="js plain">.hello {</code> </div> <div class="line number20 index19 alt1"> <code class="js spaces"> </code> <code class="js plain">text-align: center;</code> </div> <div class="line number21 index20 alt2"> <code class="js spaces"> </code> <code class="js plain">font-size: 20px;</code> </div> <div class="line number22 index21 alt1"> <code class="js spaces"> </code> <code class="js plain">width: 300px;</code> </div> <div class="line number23 index22 alt2"> <code class="js spaces"> </code> <code class="js plain">height: 400px;</code> </div> <div class="line number24 index23 alt1"> <code class="js spaces"> </code> <code class="js plain">background:red;</code> </div> <div class="line number25 index24 alt2"> <code class="js spaces"> </code> <code class="js plain">}</code> </div> <div class="line number26 index25 alt1"> <code class="js plain">

效果

前端精品教程：百度网盘下载

补充：下面看下Vue用rem布局

前端精品教程：百度网盘下载

使用vue.js搭建一个移动端项目，怎样做到自适应呢？当然选择rem布局是比较方便快捷的。

在使用vue-cli搭建好项目框架后，在目录结构的index.html文件中添加一段代码：

</code> </div> <div class="line number2 index1 alt1"> <code class="js plain">fnResize()</code> </div> <div class="line number3 index2 alt2"> <code class="js plain">window.onresize = </code> <code class="js keyword">function</code> <code class="js plain">() {</code> </div> <div class="line number4 index3 alt1"> <code class="js plain">fnResize()</code> </div> <div class="line number5 index4 alt2"> <code class="js plain">}</code> </div> <div class="line number6 index5 alt1"> <code class="js keyword">function</code> <code class="js plain">fnResize() {</code> </div> <div class="line number7 index6 alt2"> <code class="js keyword">var</code> <code class="js plain">deviceWidth = document.documentElement.clientWidth || window.innerWidth</code> </div> <div class="line number8 index7 alt1"> <code class="js keyword">if</code> <code class="js plain">(deviceWidth >= 750) {</code> </div> <div class="line number9 index8 alt2"> <code class="js plain">deviceWidth = 750</code> </div> <div class="line number10 index9 alt1"> <code class="js plain">}</code> </div> <div class="line number11 index10 alt2"> <code class="js keyword">if</code> <code class="js plain">(deviceWidth <= 320) {</code> </div> <div class="line number12 index11 alt1"> <code class="js plain">deviceWidth = 320</code> </div> <div class="line number13 index12 alt2"> <code class="js plain">}</code> </div> <div class="line number14 index13 alt1"> <code class="js plain">document.documentElement.style.fontSize = (deviceWidth / 7.5) + </code> <code class="js string">'px'</code> </div> <div class="line number15 index14 alt2"> <code class="js plain">}</code> </div> <div class="line number16 index15 alt1"> <code class="js plain">

之后，在写css时，只要将px单位替换成rem，这里设置的比例是100px=1rem,例如，宽度为100px时，可以直接写成1rem。

转载于:https://www.cnblogs.com/zanguixuan/p/9811167.html