postcss-pxtorem移动端适配的实现
发布时间：2019-12-03 15:33:53 作者：woniu12 
我要评论
我要评论这篇文章主要介绍了postcss-pxtorem移动端适配的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
执行命令 安装插件postcss-pxtorem
npm install postcss-pxtorem -D
postcss.config.js 新建package.json同一个目录下，文件内容如下
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 32,//结果为：设计稿元素尺寸/32(一般750px的设计稿的根元素大小设置32)，比如元素宽320px,最终页面会换算成 10rem
propList: ['*'], //属性的选择器，*表示通用
selectorBlackList:[] 忽略的选择器 .ig- 表示 .ig- 开头的都不会转换
}
}
}
postcss.config.js此文件配置完成后需要重启项目生效
在根目录src中新建util目录下新建rem.js等比适配文件
// rem等比适配配置文件
// 基准大小
const baseSize = 750 // 注意此值要与 postcss.config.js 文件中的 rootValue保持一致
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 375宽的缩放比例，可根据自己需要修改,一般设计稿都是宽750(图方便可以拿到设计图后改过来)。
const scale = document.documentElement.clientWidth / 375
// 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
在 main.js中引入 rem.js 文件，然后启动项目
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持程序员之家。
相关文章
- 这篇文章主要介绍了CSS中单位px、rem、em、vh、vw之间的区别,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-05-25
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
这篇文章主要介绍了CSS 中px、em、rem、%、vw、vh单位之间的区别，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2020-03-16
这篇文章主要介绍了css基于媒体查询和 rem 的响应式布局实践的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-30
移动端使用 rem 单位时 css sprites 定位问题的解决
现在开发移动端 wap 页面，相信大家都会使用强大的 rem 单位去适配各种机型和屏幕；这篇文章主要介绍了移动端使用 rem 单位时 css sprites 定位问题的解决，小编觉得挺不错2018-06-20- 本文主要介绍了CSS中px em rem区别与使用。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-27
- 相信每位前端工程师们都有这么一个体会，国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？下面这篇文章小编就来给大2017-02-24
- 国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别呢？下面程序员之家小编给大家详细介绍下2016-05-06
这篇文章主要介绍了CSS 中 em 和 rem 单位的区别,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-05-24
最新评论