本文介绍了Vue移动端rem适配的相关内容。包括使用npm安装postcss - pxtorem，在vue - cli3创建的项目根目录配置vue.config.js，重点是css配置。还需配套使用rem.js监听窗口尺寸变化改变font - size，在main.js中引入。同时指出行内样式不生效问题及备选方案。
一，安装
npm install postcss-pxtorem --save
1
完成的标志是package.json中生成对应依赖：
二，配置
vue-cli3创建的文件，在根目录创建vue.config.js文件，进行配置：
其中css的配置是重点
//nodejs内置的管理路径相关的模块
let path = require("path");
function resolve(str) {
// _dirname nodejs的内置变量，代表当前项目路径
return path.resolve(__dirname, "src", str);
}
module.exports = {
//开发服务器
devServer: {
//端口
port: 99,
proxy: {
// /api/user/test => http://192.168.1.222:8888/user/test
"/api": {
target: "http://192.168.1.222:88/",
pathRewrite: {
"^/api": "", // rewrite path
}, // target: 'http://www.example.org', // target host // changeOrigin: true, // needed for virtual hosted sites // ws: true, // proxy websockets // pathRewrite: { // '^/api/old-path': '/api/new-path', // rewrite path // '^/api/remove/path': '/path', // remove base path // }, // router: { // // when request.headers.host == 'dev.localhost:3000', // // override target 'http://www.example.org' to 'http://localhost:8000' // 'dev.localhost:3000': 'http://localhost:8000', // },
},
"/foo": {
target: "http://1.3.4.6:8899",
},
},
},
lintOnSave: "warning", //lint验证,警告
productionSourceMap: false, //不产生map文件
publicPath: "/dist", //当项目放在网站子目录时，需配置成子目录名称
configureWebpack: {
module: {
rules: [
{
test: /\.bmp$/,
use: {
loader: "url-loader",
options: {
limit: 1024 * 4,
name: "img/[name].[ext]",
},
},
},
],
}, // resolve: { // alias: { // '~c': __dirname + '/src/components', // '~v': __dirname + '/src/views', // } // }
},
//链式操作webpack
chainWebpack: (config) => {
//告诉webpack处理bmp文件时采用url-loader加载
// config.module
//配置文件夹路径别名
config.resolve.alias
.set("~c",resolve("components"))
.set("~r",resolve("router"))
.set("~p",resolve("page"))
.set("~v",resolve("view"))
.set("@a",resolve("assets"))
//配置网站标题
config
.plugin('html')
.tap(args =>{
args[0].title = 'KGC'
return args
})
},
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({ // 把px单位换算成rem单位
rootValue: 32, //换算基数，
unitPrecision: 3, //允许REM单位增长到的十进制数字,小数点后保留的位数。
propList: ['*'],
exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
selectorBlackList: ['.van'], //要忽略并保留为px的选择器，本项目我是用的vant ui框架，所以忽略他
mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
minPixelValue: 1 //设置要替换的最小像素值
})
]
}
}
}
};
三，配套使用rem.js
从上文可以知道，rem单位是以html的font-size作为基准实现页面尺寸布局的，那么这样子，如果根节点的font-size我们一直写死37.5px的话，页面的自适应便无法实现了。
为了达到不同的设备宽度对应不同的font-size样式，需要一个js文件，让它实时监听窗口的尺寸变化，从而改变font-size的值：
新建ultils文件夹，里面建rem.js文件：
const baseSize = 32 // 基准大小 32px =1rem
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
const scale = document.documentElement.clientWidth / 750
// 设置页面根节点字体大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
四、然后再在main.js文件中引入即可:
//移动端rem适配文件
import ‘./util/rem.js’
五、问题
1.行内样式不生效，
六、备选方案，把根元素设置为20px ,让1rem = 20px，这样在行内样式方便计算
// const baseSize = 32 // 基准大小 32px =1rem
// // 设置 rem 函数
// function setRem () {
// // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
// const scale = document.documentElement.clientWidth / 750
// // 设置页面根节点字体大小
// document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
// }
// // 初始化
// setRem()
// // 改变窗口大小时重新设置 rem
// window.onresize = function () {
// setRem()
// }
window.onload = function () {
var setRem = function () {
// UI设计稿的宽度
var uiWidth = 750;
// 移动端屏幕宽度
var winWidth = document.documentElement.clientWidth;
// 比率
var rate = winWidth / uiWidth;
// 设置html元素的字体大小
document.documentElement.style.fontSize = rate * 20 + "px"
};
setRem();
window.onresize = function () {
setRem();
}
}
//nodejs内置的管理路径相关的模块
let path = require("path");
function resolve(str) {
// _dirname nodejs的内置变量，代表当前项目路径
return path.resolve(__dirname, "src", str);
}
module.exports = {
//开发服务器
devServer: {
//端口
port: 99,
proxy: {
// /api/user/test => http://192.168.1.222:8888/user/test
"/api": {
target: "http://192.168.1.222:88/",
pathRewrite: {
"^/api": "", // rewrite path
}, // target: 'http://www.example.org', // target host // changeOrigin: true, // needed for virtual hosted sites // ws: true, // proxy websockets // pathRewrite: { // '^/api/old-path': '/api/new-path', // rewrite path // '^/api/remove/path': '/path', // remove base path // }, // router: { // // when request.headers.host == 'dev.localhost:3000', // // override target 'http://www.example.org' to 'http://localhost:8000' // 'dev.localhost:3000': 'http://localhost:8000', // },
},
"/foo": {
target: "http://1.3.4.6:8899",
},
},
},
lintOnSave: "warning", //lint验证,警告
productionSourceMap: false, //不产生map文件
publicPath: "/dist", //当项目放在网站子目录时，需配置成子目录名称
configureWebpack: {
module: {
rules: [
{
test: /\.bmp$/,
use: {
loader: "url-loader",
options: {
limit: 1024 * 4,
name: "img/[name].[ext]",
},
},
},
],
}, // resolve: { // alias: { // '~c': __dirname + '/src/components', // '~v': __dirname + '/src/views', // } // }
},
//链式操作webpack
chainWebpack: (config) => {
//告诉webpack处理bmp文件时采用url-loader加载
// config.module
//配置文件夹路径别名
config.resolve.alias
.set("~c",resolve("components"))
.set("~r",resolve("router"))
.set("~p",resolve("page"))
.set("~v",resolve("view"))
.set("@a",resolve("assets"))
//配置网站标题
config
.plugin('html')
.tap(args =>{
args[0].title = 'KGC'
return args
})
},
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({ // 把px单位换算成rem单位
rootValue: 20, //换算基数，
unitPrecision: 3, //允许REM单位增长到的十进制数字,小数点后保留的位数。
propList: ['*'],
exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
selectorBlackList: ['.van'], //要忽略并保留为px的选择器，本项目我是用的vant ui框架，所以忽略他
mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
minPixelValue: 1 //设置要替换的最小像素值
})
]
}
}
}
};
扫一扫
698
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
