postcss-px2rem-exclude,postcss-pxtorem是如何做到适配的
这篇文章主要介绍了某视频剪辑软件项目中使用postcss-px2rem的方法总结，在项目中为了屏幕适配，经常会用到后css-px2rem就是为了让我们直接在将代码中像素自动转化成对应的雷姆的一个插件，需要的朋友可以参考下
目录
如何使用：1.安装2.设置某视频剪辑软件项目中使用postcss-px2rem的2种方法
在项目中为了屏幕适配，经常会用到后css-px2rem就是为了让我们直接在将代码中像素自动转化成对应的雷姆的一个插件(下边的方法适用于使用cli2脚手架搭建的项目，现在好多数项目使用cli3搭建，我在后边的文章中增加了vue使用雷姆实现移动端屏幕适配).)
如何使用：
1.安装
npm i postcss-px2rem - save -dev
2.设置
1).找到项目根目录下的106 . postcsrc文件
模块。导出={
插件:{
postcss-import: {}，
postcss-url: {}，
//编辑目标浏览器：使用package.json中的"浏览列表"字段
“自动修复程序”:
浏览器:[最近10个铬版本,最近5个火狐浏览器版本， Safari=8]
},
post CSS-px 2 rem :{ rem unit :75 }//配置雷姆基准值，75是iphone6标准
}
}
记忆单位：75代表1rem=75px所以当你一个75px值时，它会自动转成(75px/75)雷姆，
转化完之后，你还需要在根元素设置他的字体大小，因为雷姆是相对根元素来设置大小的
html {
字体大小：10vw
}
这样的话我们设置的像素值就变成对应的10%的屏幕宽度*(75px/75)雷姆
2) 找到根目录下的vue-loader.conf.js
本人使用的是这种方法。
首先需要设置超文本标记语言的字体大小值，1rem=html的字体大小，这里咱们动态设置一下，可以直接在index.html中设置
个人电脑端
（函数(){
函数setRootFontSize() {
设rem，根宽
设根html=document。文档元素；
//限制展现页面的最小宽度
根宽度=根html。客户端宽度1366？1366:根html。客户端宽度；
//19.2=设计图尺寸宽/100( 设计图的雷姆=100)
rem=根宽/19.2;
//动态写入样式
根html。风格。font size=` $ { rem } px
}
setRootFontSize()；
窗户。addevent侦听器( resize ，setRootFontSize，false)；
})();
移动端
（函数(){
函数setRootFontSize() {
设dpr，rem，刻度，根宽
设根html=document。文档元素；
DPR=窗户。devicepixelrratio 1；//移动端必须设置
//限制展现页面的最小宽度
根宽度=根html。客户端宽度1366？1366:根html。客户端宽度；
rem=根宽* DPR/19.2；//19.2=设计图尺寸宽1920/100(设计图的雷姆=100)
比例尺=1/DPR；
//设置视口，进行缩放，达到高清效果（移动端添加)
设VP=文档。查询选择器( meta[name= viewport ])；
vp.setAttribute(content ， width= DPR *根html。客户端宽度，initial-scale= scale ，maximum-scale= scale ，minimum-scale= scale ，user-scalable=no)；
//动态写入样式
根html。风格。font size=` $ { rem } px
}
setRootFontSize()；
窗户。addevent侦听器( resize ，setRootFontSize，false)；
窗户。addevent侦听器( orientation change ，setRootFontSize，false)；//移动端
})();
使用严格
const utils=require( ./utils )
const config=require(./config’)
const是生产=过程。环境。node _ ENV===生产
const source mapenabled=是生产
？生产源映射
:config.dev.cssSourceMap
const px 2 rem=require( post CSS-px 2 rem )
模块。导出={
加载程序：utils.cssLoaders({
sourceMap: sourceMapEnabled，
提取：is生产
}),
cssSourceMap: sourceMapEnabled，
缓存套管：配置。戴夫。缓存套管，
transformToRequire: {
视频：[src ，海报],
来源：“src”，
img: src ，
图像： xlink:href
},
postcss: function() {
return[px 2 rem({ rem unit:100 })]；
}
}
修改后记得重新编译。
我也写过一篇关于vue将rem应用于手机屏幕改编的文章。有需要的话可以看看。希望对你有帮助。请评论和建议。
本文关于在vue项目中使用postcss-px2rem的方法总结到此为止。关于在vue中使用postcss-px2rem的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。