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 相关文章推荐
js身份证验证超强脚本
Oct 26 Javascript
JavaScript 基础篇(一)
Mar 30 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
当jQuery1.7遇上focus方法的问题
Jan 26 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
Vue SSR 即时编译技术的实现
May 06 Javascript
微信小程序实现音乐播放页面布局
Dec 11 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
PHP实现分页的一个示例
2006/10/09 PHP
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
React组件refs的使用详解
2018/02/09 Javascript
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
python3.3实现乘法表示例
2014/02/07 Python
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
Python利用IPython提高开发效率
2016/08/10 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
.NET是怎么支持多种语言的
2015/02/24 面试题
安全资金保障制度
2014/01/23 职场文书
小学生评语大全
2014/04/18 职场文书
学前教育专业求职信
2014/09/02 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
2021/11/11 HTML / CSS
MYSQL如何查看操作日志详解
2022/05/30 MySQL