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与iframe的那些事儿
Jul 04 Javascript
Extjs NumberField后面加单位实现思路
Jul 30 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
文档对象模型DOM通俗讲解
Nov 01 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
Google Maps基础及实例解析
Aug 06 Javascript
Angular的自定义指令以及实例
Dec 26 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
vue component组件使用方法详解
Jul 14 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
js实现坦克移动小游戏
Oct 28 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 中文乱码解决办法总结分析
2009/07/30 PHP
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
PHP设计模式 注册表模式
2012/02/05 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
PHP几个实用自定义函数小结
2016/01/25 PHP
PHP实现蛇形矩阵,回环矩阵及数字螺旋矩阵的方法分析
2017/05/29 PHP
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
js中文逗号转英文实现
2014/02/11 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
Python调用命令行进度条的方法
2015/05/05 Python
使用Python设计一个代码统计工具
2018/04/04 Python
python 编码规范整理
2018/05/05 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
Python 远程开关机的方法
2020/11/18 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
最新远光软件笔试题面试题内容
2013/11/08 面试题
质量整改通知单
2015/04/21 职场文书
关于CSS自定义属性与前端页面的主题切换问题
2022/03/21 HTML / CSS
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技