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 相关文章推荐
JavaScript 学习笔记(九)call和apply方法
Jan 11 Javascript
js操作二级联动实现代码
Jul 27 Javascript
使用隐藏的new来创建对象
Mar 29 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
jQuery+jRange实现滑动选取数值范围特效
Mar 14 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
js检测用户输入密码强度
Oct 22 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 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服务端图片生成缩略图的方法详解
2013/06/20 PHP
php像数组一样存取和修改字符串字符
2014/03/21 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
Python文件读写常见用法总结
2019/02/22 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
Django 外键的使用方法详解
2019/07/19 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
数学专业推荐信范文
2013/11/21 职场文书
车间操作工岗位职责
2013/12/19 职场文书
《花木兰》教学反思
2014/04/09 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
北京天坛导游词
2015/02/12 职场文书
对公司的意见和建议
2015/06/04 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python