vue3.0中使用postcss-pxtorem的具体方法


Posted in Javascript onNovember 20, 2019

postcss-pxtorem是PostCSS的插件,用于将像素单元生成rem单位。

前端开发还原设计稿的重要性毋庸置疑,目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值,为了能够直接按照设计图的尺寸开发,并且能自动编译转换成rem,下面就来分享下postcss-pxtorem的使用。

1.安装依赖

npm install postcss-pxtorem -D

2.设置规则(更改postcss.config.js,该文件为使用vue-cli3自动创建的文件)

module.exports = {
 plugins: {
  'autoprefixer': {
   browsers: ['Android >= 4.0', 'iOS >= 7']
  },
  'postcss-pxtorem': {
   rootValue: 16,//结果为:设计稿元素尺寸/16,比如元素宽320px,最终页面会换算成 20rem
   propList: ['*']
  }
 }
}

操作到这里移动端自动适配了吗,当然不能,目前只是将px单位转换成rem,移动端适配还差最后一步,初接触rem理解起来有点懵,后来发现了一个好理解的方法,下面来分享一下。

现在我们作一个实验,你可以新建一个网页,并写入如下代码:

<div class="test">
  <p class="hello">Hello</p>
</div>

然后给html一个基本的样式:

.test{
  width:320px;
  height:160px;
  background-color: bisque;
  text-align: center;
}
.hello{
  color:red;
}

上边我们使用了还是传统的使用px作为单位,我们在移动端调试模式iphone5环境查看一下。会发现div的宽度是正好的,我们再查看一下字体,发现大小是16px。

我们现在可以把CSS中的px单位换成rem单位来进行测试。因为html根元素的字体大小是16px,那么换成rem单位,直接除以16就好。

.test{
  width:20rem;
  height:10rem;
  background-color: bisque;
  text-align: center;
}
.hello{
  color:red;
  font-size:1rem;
}

明白了REM的原理后,我们就可以使用这个特点来进行适应布局了,这也是现在比较主流的移动端web适配方案。src目录下,新建 libs/rem.js 输入如下代码

// 设置 rem 函数
function setRem () {

  // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
  let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
  let htmlDom = document.getElementsByTagName('html')[0];
//设置根元素字体大小
  htmlDom.style.fontSize= htmlWidth/20 + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

在main.js中引入rem.js

import './libs/rem.js';

最后刷新页面看下,就会发现原本用px的单位已经自动换算成了rem;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 Javascript
关于锚点跳转及jQuery下相关操作与插件
Oct 01 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
JS实现简单拖拽效果
Jun 21 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
如何通过vscode运行调试javascript代码
Jul 24 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 #Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 #Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 #Javascript
详解Nuxt.js 实战集锦
Nov 19 #Javascript
javascript的delete运算符知识点总结
Nov 19 #Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 #Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 #Javascript
You might like
PHP的FTP学习(一)
2006/10/09 PHP
yii的CURD操作实例详解
2014/12/04 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
超级强大的表单验证
2006/06/26 Javascript
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
Javascript 读后台cookie代码
2008/09/15 Javascript
Eval and new funciton not the same thing
2012/12/27 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
基于Python的接口测试框架实例
2016/11/04 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
python opencv 直方图反向投影的方法
2018/02/24 Python
python爬虫之自动登录与验证码识别
2020/06/15 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
一年级班主任感言
2014/03/08 职场文书
应届大专生求职信
2014/06/26 职场文书
2015年财务试用期工作总结
2014/12/24 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
公司食堂管理制度
2015/08/05 职场文书
学习经验交流会策划书
2015/11/02 职场文书