vue px2rem,vuepx转rem
移动页面适配，rem和vw适配方案，本文主要介绍vue项目中rem替代px的实现实例，有一定的参考价值，感兴趣的朋友可以参考一下。
目录
工具安装插件将postcssrc.js文件添加到项目的根目录。index.html关于移动页面适配、rem和vw适配方案
base:rem相对于根节点字体的大小。所以没有px；
根字体：字体的大小px；
Px:就当是cm(厘米)之类的东西吧；
基准：750设计稿(一般UI设计师给750设计稿)；
工具
Vue-cli:用脚手架搭建Vue前端项目。
Post:是postcss使用js插件帮助你转换css样式的工具。比如这里，在你的文件中用1rem替换16px(默认根大小是16px)；这样就不用自己动手了！
Cssrem:主要帮你把px(UI设计到设计稿上的px)转换成对应的rem。
然后，我们需要使用js代码来动态计算根目录的字体大小。反正动态获取屏幕宽度就是一段js代码。
安装插件
npm i postcss，postcss-pxtorem，postcss-loader，postcss-import，postcss-url
然后将它添加到index.html中。
meta name= viewport content= width=设备宽度，初始比例=1，最大比例=1
在项目根目录下添加.postcssrc.js文件
模块.导出={
插件:{
Postcss-import: {}，//用于@import导入css文件
Postcss-url: {}，//将路径引入css文件或node_modules文件
Post CSS-aspect-ratio-mini: {}，//用于处理元素容器的纵横比
post CSS-write-SVG :{ utf8:false }，//用于在移动终端上处理1px的解决方案。该插件主要使用border-image和background进行1px相关处理。
Postcss-cssnext: {}，//这个插件允许我们使用css未来的特性，它会对这些特性做相关的兼容性处理。
Postcss-px-to-viewport: {//将px单位转换为vw、vh、vmin或vmax等windows单位，也是vw适配方案的核心插件之一。
ViewportWidth: 750，//窗口的宽度
ViewportHeight: 1334，//窗口的高度
UnitPrecision: 3，//将px转换为窗口单位值的小数位。
ViewportUnit: vw ，//指定要转换到的窗口单位值。
选择器黑名单：[。忽略“，”。发际线]，//指定不转换窗口单位值的类，可以自定义，可以无限添加。
Pixelvalue: 1，//小于等于1px不会转换成窗口单位。
MediaQuery:媒体查询中允许false //px
},
Postcss-viewport-units:{}，//对vw，vh，vmin，vmax做自适应操作，是实现vw布局不可或缺的插件。
Cssnano: {//主要用于压缩和清理CSS代码。在Webpack中，cssnano和css-loader是捆绑在一起的，不需要自己加载。
预设：高级，//重复调用
Autoprefixer: false，//cssnext和cssnano都有Autoprefixer。实际上只需要一个，所以删除默认的autoprefixer，然后在cssnano中设置autoprefixer为false。
Postcss-zindex: false //只要这个插件被启用，z-index的值将被重置为1
}
}
}
当切换不同大小的屏幕时，需要动态改变根字体的大小。头中插入一个简单的js:直接在公共目录中创建shipei.js，然后将这个js引入index.html的头中。
//shipei.js
(函数(){
函数autoRootFontSize() {
document . document element . style . font size=math . min(screen . width，document . document element . getboundingclientrect()。宽度)/750 * 32 px ；
//取screen.width和document . documentelement . getboundingclient()的最小值。宽度；除以750再乘以32；了解价差，即750 32px的原始尺寸；如果屏幕尺寸变成375px，那么字体就是16px也就是根字体fontSize的大小和屏幕大小成正比变化！这不是很简单吗？
}
窗口addevent侦听器% 28% 27 resize % 27 2c % 20 autobootfontsize % 29% 3b % 0a % 20 autobootfontsize % 28% 29% 3b % 0a % 7d % 29% 28% 29% 29% 3b % 0a % 20% 3a
index.html
% 20% 0a % 21 doctype % 20 html % 0 ahml % 20 lang % 3d % 27% 27% 27% 0a % 20 head % 0a % 20 meta % 20 charset %
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。