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


Posted in Javascript onSeptember 26, 2018

要想移动端适配 并使用 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

<template>
 <div class="hello">
 test
 </div>
</template>

<script>
 export default {
 name: 'HelloWorld',
 data() {
  return {
  msg: 'Welcome to Your Vue.js App'
  }
 }
 }
</script>

<style scoped>
 .hello {
 text-align: center;
 font-size: 20px;
 width: 300px;
 height: 400px;
 background:red;
 }
</style>

效果

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

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

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

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

<script>
fnResize()
window.onresize = function () {
fnResize()
}
function fnResize() {
var deviceWidth = document.documentElement.clientWidth || window.innerWidth
if (deviceWidth >= 750) {
deviceWidth = 750
}
if (deviceWidth <= 320) {
deviceWidth = 320
}
document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px'
}
</script>

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

总结

以上所述是小编给大家介绍的vue使用rem实现 移动端屏幕适配 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
从Ajax到JQuery Ajax学习
Feb 14 Javascript
jQuery.extend 函数详解
Feb 03 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
Javascript中的几种URL编码方法比较
Jan 23 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
Angular 应用技巧总结
Sep 14 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
微信小程序Echarts覆盖正常组件问题解决
Jul 13 Javascript
JS几个常用的函数和对象定义与用法示例
Jan 15 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 #Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
Sep 25 #Javascript
vue单页缓存方案分析及实现
Sep 25 #Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 #Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 #Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 #Javascript
使用vue2.0创建的项目的步骤方法
Sep 25 #Javascript
You might like
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
遍历指定目录下的所有目录和文件的php代码
2011/11/27 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
Vue 获取数组键名的方法
2018/06/21 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
python分布式环境下的限流器的示例
2017/10/26 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
Python numpy数组转置与轴变换
2019/11/15 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
介绍一下Ruby的特点
2013/01/20 面试题
培训讲师岗位职责
2014/04/13 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
教学督导岗位职责
2015/04/10 职场文书
运动会通讯稿600字
2015/07/20 职场文书
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android