vue 实现 rem 布局或vw 布局的方法


Posted in Javascript onNovember 13, 2019

一、实现 rem 布局

移动端

<meta
 name="viewport"
 content="width=device-width, initial-scale=1, maximum-scale=1"
/>

方法一、在 index.html 或者 main.js 中添加以下代码:

const setHtmlFontSize = () => {
 let deviceWidth =
  document.documentElement.clientWidth || document.body.clientWidth
 if (deviceWidth >= 750) {
  deviceWidth = 750
 }
 if (deviceWidth <= 320) {
  deviceWidth = 320
 }
 document.documentElement.style.fontSize = `${deviceWidth / 7.5}px`
}
window.onresize = setHtmlFontSize
setHtmlFontSize()

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

方法二、cli3 使用 lib-flexible 和 将 px 自动转换为 rem 插件

1、安装插件

npm install lib-flexible --save
npm install px2rem-loader --save-dev

或选择

npm install postcss-plugin-px2rem --save-dev(推荐)

或选择

npm install postcss-px2rem --save-dev

2、配置插件

在入口文件 main.js 中引入 lib-flexible

import 'lib-flexible/flexible'

3、三种插件的 cli3 配置:

在 vue.config.js 中

//px2rem-loader配置
module.exports = {
 chainWebpack: config => {
  config.module
   .rule('css')
   .test(/\.css$/)
   .oneOf('vue')
   .resourceQuery(/\?vue/)
   .use('px2rem')
   .loader('px2rem-loader')
   .options({
    remUnit: 75
   })
 }
}
//postcss-plugin-px2rem
module.exports = {
 css: {
  loaderOptions: {
   postcss: {
    plugins: [
     require('postcss-plugin-px2rem')({
      rootValue: 75, //换算基数, 默认100 ,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
      // unitPrecision: 5, //允许REM单位增长到的十进制数字。
      //propWhiteList: [], //默认值是一个空数组,这意味着禁用白名单并启用所有属性。
      // propBlackList: [], //黑名单
      exclude: /(node_module)/, //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)\/如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
      // selectorBlackList: [], //要忽略并保留为px的选择器
      // ignoreIdentifier: false, //(boolean/string)忽略单个属性的方法,启用ignoreidentifier后,replace将自动设置为true。
      // replace: true, // (布尔值)替换包含REM的规则,而不是添加回退。
      mediaQuery: false, //(布尔值)允许在媒体查询中转换px。
      minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
     })
    ]
   }
  }
 }
}
//postcss-px2rem配置
module.exports = {
 css: {
  loaderOptions: {
   postcss: {
    plugins: [
     require('postcss-px2rem')({
      remUnit: 37.5 //设计图除10之后的一半,兼容第三方库px转成rem样式变小的情况
     })
    ]
   }
  }
 }
}

二、cli3 实现 vw 布局

vw 是基于 Viewport 视窗的长度单位

vw:是 Viewport's width 的简写,1vw 等于 window.innerWidth 的 1%
vh:和 vw 类似,是 Viewport's height 的简写,1vh 等于 window.innerHeihgt 的 1%
vmin:vmin 的值是当前 vw 和 vh 中较小的值
vmax:vmax 的值是当前 vw 和 vh 中较大的值

1、安装插件(可以直接转换 px 为 vw)

npm i postcss-px-to-viewport -D

2、在 vue.config.js 中

module.exports = {
 css: {
  loaderOptions: {
   postcss: {
    plugins: [
     require('postcss-px-to-viewport')({
      viewportWidth: 750, //视口宽度,这里设置为跟设计稿宽度一致;
      viewportHeight: 1334, //视口高度,随便设置一个就可以;
      unitPrecision: 3, //转换后值的精度,3表示保留3位小数;
      viewportUnit: 'vw', //转换成什么视口单位,这里当然是vw;
      selectorBlackList: ['.ignore', '.hairlines'], //是一个选择符数组,对应声明中的像素单位不会转换;
      minPixelValue: 1, //最小像素值,大于等于这个值才会转换;
      mediaQuery: false //是否转换媒体查询中的像素。
     })
    ]
   }
  }
 }
}

总结

以上所述是小编给大家介绍的vue 实现 rem 布局或vw 布局的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
编写Js代码要注意的几条规则
Sep 10 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
javascript 中的 delete及delete运算符
Nov 15 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
Bootstrap实现默认导航栏效果
Sep 21 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 Javascript
js正则表达式验证表单【完整版】
Mar 06 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
详解如何修改 node_modules 里的文件
May 22 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 #Javascript
JavaScript数组及常见操作方法小结
Nov 13 #Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 #Javascript
javascript操作元素的常见方法小结
Nov 13 #Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 #Javascript
vue项目中锚点定位替代方式
Nov 13 #Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 #Javascript
You might like
PHP 简单数组排序实现代码
2009/08/05 PHP
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
WAF的正确bypass
2017/01/05 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
JS重要知识点小结
2011/11/06 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
JavaScript中的cacheStorage使用详解
2015/07/29 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
css3中仿放大镜效果的几种方式原理解析
2020/12/03 HTML / CSS
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
优秀共产党员先进事迹
2014/01/27 职场文书
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
青年文明号创建承诺
2014/03/31 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
初中学习计划书范文
2014/09/15 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书