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 相关文章推荐
javascripit实现密码强度检测代码分享
Dec 12 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 Javascript
angular.element方法汇总
Jan 07 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
javascript实现控制div颜色
Jul 07 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
vscode调试node.js的实现方法
Mar 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传输数据的代码
2007/11/13 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
学习ExtJS Window常用方法
2009/10/07 Javascript
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
Python正则抓取网易新闻的方法示例
2017/04/21 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
linux面试题参考答案(10)
2016/10/26 面试题
数控加工专业毕业生自荐信
2013/09/27 职场文书
音乐专业应届生教师求职信
2013/11/04 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
会计岗位职责
2015/02/03 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
教师素质教育心得体会
2016/01/19 职场文书