大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全家桶1年46，售后保障稳定
vue项目中使用postcss-px2rem的2种方法
在项目中为了屏幕适配，经常会用到rem，postcss-px2rem就是为了让我们直接在将代码中px自动转化成对应的rem的一个插件.(下边的方法适用于使用cli2脚手架搭建的项目,现在好多数项目使用cli3搭建,我在后边的文章中增加了对cli3项目自适应的配置.)
如何使用：
1.安装
npm i postcss-px2rem –save -dev
2.设置
1）.找到项目根目录下的.postcssrc文件
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {
"browsers": ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 8']
},
'postcss-px2rem':{'remUnit':75} //配置rem基准值，75是iphone6标准
}
}
remUnit: 75 代表 1rem = 75px; 所以当你一个75px值时，它会自动转成 (75px/75)rem,
转化完之后，你还需要在根元素设置他的font-size,因为rem是相对根元素来设置大小的
html {
font-size: 10vw;
}
这样的话我们设置的px值 就变成对应的 10%的屏幕宽度 *(75px/75)rem
2） 找到根目录下的vue-loader.conf.js
本人使用的是这种方法.
首先需要设置html的fontsize值,1rem = html的font-size,这里咱们动态设置一下,可以直接在index.html中设置
PC端
(function () {
function setRootFontSize() {
let rem, rootWidth;
let rootHtml = document.documentElement;
//限制展现页面的最小宽度
rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth;
// 19.2 = 设计图尺寸宽 / 100（ 设计图的rem = 100 ）
rem = rootWidth / 19.2;
// 动态写入样式
rootHtml.style.fontSize = `${rem}px`;
}
setRootFontSize();
window.addEventListener("resize", setRootFontSize, false);
})();
移动端
(function () {
function setRootFontSize() {
let dpr, rem, scale, rootWidth;
let rootHtml = document.documentElement;
dpr = window.devicePixelRatio || 1; //移动端必须设置
//限制展现页面的最小宽度
rootWidth = rootHtml.clientWidth < 1366 ? 1366 : rootHtml.clientWidth;
rem = rootWidth * dpr / 19.2; // 19.2 = 设计图尺寸宽1920 / 100（设计图的rem = 100）
scale = 1 / dpr;
// 设置viewport，进行缩放，达到高清效果 (移动端添加)
let vp = document.querySelector('meta[name="viewport"]');
vp.setAttribute('content', 'width=' + dpr * rootHtml.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
// 动态写入样式
rootHtml.style.fontSize = `${rem}px`;
}
setRootFontSize();
window.addEventListener("resize", setRootFontSize, false);
window.addEventListener("orientationchange", setRootFontSize, false); //移动端
})();
'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap
const px2rem = require('postcss-px2rem')
module.exports = {
loaders: utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: isProduction
}),
cssSourceMap: sourceMapEnabled,
cacheBusting: config.dev.cacheBusting,
transformToRequire: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href'
},
postcss: function() {
return [px2rem({remUnit: 100})];
}
}
修改完成后 记得重新编译
我还写了一篇 移动端自适应px2vw的文章,有需要的可以去看看,希望对你有帮助,多多评论指教.
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/207472.html原文链接：https://javaforall.net
