vue-cli2.0-4.0的移动端及PC端屏幕大小适配
适配配置完成后需重启项目才会生效
移动端适配vue-cli3.0
第一种方案(常用)——px转rem适配方案:
【第1步、使用pxtorem px转成rem】——让网页根据设备dpr和宽度,利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备
yarn add lib-flexible 或者 npm install lib-flexible(建议用yarn,我用npm出错了,用yarn是可行的)
【第2步、引入lib-flexible】
在main.js引入中:import 'lib-flexible/flexible.js'
【第3步、方案一:使用npm或yarn 安装 如 npm install --save-dev postcss-loader postcss-px2rem】(推荐方案一)
注1:vue-cli3.0+里好像已经内置postcss-loader了。所以也可以直接yarn add postcss-px2rem 如果不生效再考虑安装postcss-loader
注2:随着发展,现在更推荐用postcss-plugin-px2rem(拥有更多的配置选项和属性),而非postcss-px2rem,详见最下面介绍
然后在配置文件中配置,(可以在vue.config.js中配置,也可在package.json中配置)
module.exports = {
css: {
loaderOptions: {
css: {
// options here will be passed to css-loader
},
postcss: {
// options here will be passed to postcss-loader
plugins: [require('postcss-px2rem')({
remUnit: 37.5 //缩放比例:是75还是37.5还是其他数值,需要根据ui图来定。取值方式为 设计图宽度/10
})]
}
}
}
}
【第3步、方案二:安装postcss-pxtorem】
yarn add postcss-pxtorem
如果你的配置文件是package.json(在你创建vue项目时,会让你选择配置文件),则在package.json内,添加postcss:
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 37.5, // 设计稿宽度的1/10,(JSON文件中不加注释,此行注释及下行注释均需要删除)
"propList":["*"] // 需要做转化处理的属性,如`hight`、`width`、`margin`等,`*`表示全部
}
}
},
如果你的配置文件是自定义配置文件,则你可以在根目录下创建配置文件vue.config.js,并配置如下信息
module.exports = {
css: {
loaderOptions: {
css: {
// options here will be passed to css-loader
},
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 37.5,
"propList":["*"]
}
}
}
}
}
}
【4、在index.html中 替换成如下代码】
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,shrink-to-fit=no,user-scalable=no">
第二种方案——px转vw适配方案(一般不用,这里只留作记录)
【1、使用 postcss-px-to-viewport】注意:移动端用方便,不过在pc端会出新字体过大的现象
npm install postcss-px-to-viewport 或者 yarn add postcss-px-to-viewport
【2、配置postcss-px-to-viewport】
package.json中,在postcss中添加代码:
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px-to-viewport": {
"viewportWidth": 375,
"minPixelValue": 1
}
}
},
【3、在index.html中添加如下代码】
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,shrink-to-fit=no,user-scalable=no">
移动端适配vue-cli2.0
第一种方案(常用):通过lib-flexible,px2rem-loader实现适配
【1、安装lib-flexible px2rem-loader】
yarn add lib-flexible yarn add px2rem-loader
【2、在main.js中引入lib-flexible】
import 'lib-flexible/flexible.js'
【3、在 index.html 中添加:移动适配 meta标签】
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
【4、在 build/util.js 中 按如下更改3处】
①将px2rem-loader添加到cssLoaders中,②options中添加minimize
const cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 37.5 //缩放比例:是75还是37.5还是其他数值,需要根据ui图来定。取值方式为 设计图宽度/10
}
}
③在generateLoaders方法中添加两处px2remLoader
function generateLoaders(loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
要修改的地方
第二种方案:通过一串js代码实现(一般不用,这里只留作记录)
在主入口:index.html,<head> 标签内添加如下JS 代码:(实现在标准 375px宽度适配下,100px = 1rem。)
<script>
(function () {
// 在标准 375px 适配下,100px = 1rem;
var baseFontSize = 100;
var baseWidth = 375;
var set = function () {
var clientWidth = document.documentElement.clientWidth || window.innerWidth;
var rem = 100;
if (clientWidth != baseWidth) {
rem = Math.floor(clientWidth / baseWidth * baseFontSize);
}
document.querySelector('html').style.fontSize = rem + 'px';
}
set();
window.addEventListener('resize', set);
}());
</script>
PC端适配
PC端使用此种方法进行适配,只需改进一个地方即可,如下(另外remUnit改成192或设计稿比例)
找到/node_modules/lib-flexible/flexible.js,并修改其代码如下
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
- width = 540 * dpr; //原本是屏幕宽度>540时则宽度固定为540
+ width = width * dpr; //现在是宽度>540时则以当前宽度为准
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
然后可能需要调整 remUnit: 192
提个醒:
1、个人发现每次在安装新的babel相关包的时候,webpack会自动把width=width*dpr改回到540*dpr,从而造成页面排版问题。
这里要注意一下,再改成width*dpr即可
2、在做了此屏幕适配处理后,IE,Microsoft Edge等浏览器会不识别1px这种的转化。所以在用到1px时请使用/*no*/注释掉,不让其转化。
如border: 1px solid #ccc; /*no*/
3、另外注意到一个问题,如在引入组件库时,比如antd-vue组件库时,
我们也需要将组件库的css文件里带1px的样式后面加/*no*/注释掉。以保证IE等浏览器也可完美适配。
如antd-vue的css文件在/node_modules/ant-design-vue/dist/antd.css
提个醒
=== postcss-pxtorem中不进行转换 ===
通过配置规则和单位使用Px或PX来解决:
如: border:1PX solid #fff;border:1Px solid #fff;
=== postcss-px2rem中不进行转换 ===
通过配置规则和单位使用Px或PX来解决(通过Px或PX使转换插件忽略当前项来达到目的):
如: border:1PX solid #fff;border:1Px solid #fff;
通过注释解决:
1、当你遇到1px的边框时,通常容易发现页面缺失部分边框,这时你可以使用/*no*/语法来屏蔽该属性转换,
例如:border: 1px solid red; /*no*/
2、由于字体的特殊性,我们在编译font-size属性时,通常不使用rem单位,这时候你可以这样使用:
例如:font-size: 24px; /*px*/
tips
【问】请问您在使用px2rem插件的时候会不会出现在style里面引用background:url()
的时候图片路劲多了../../
【答】配置postcss-px2rem之后需要把路径信息修改成url(src/assets/img/bg.png)这样就可以用了,其他文件路径正常使用,css代码的路径需要这样改,不然会报错。
tips
也可不使用postcss-px2rem,而使用postcss-plugin-px2rem,因为postcss-plugin-px2rem包含更多的配置和属性,是postcss-px2rem的升级版
相关配置如下
css: {
loaderOptions: {
postcss: {
plugins: [
require("postcss-plugin-px2rem")({
rootValue: 37.5, //换算基数, 默认100 ,可以设置为75这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
// unitPrecision: 5, //允许REM单位增长到的十进制数字。
//propWhiteList: [], //默认值是一个空数组,这意味着禁用白名单并启用所有属性。
propBlackList: ["border"], //黑名单
exclude: /(node_module)/, //默认false,可以(reg)利用正则表达式排除某些文件夹的方法。默认值为false,即该项目中所有的px均会被转换为rem
//(以上exclude配置,如/node_modules|pc/i 排除node_modules文件夹以及所有名为pc的文件夹下的,所有文件的px转换)
selectorBlackList: ['van-', 'el-'], //要忽略并保留为px的选择器。此处举例:van-为vant-UI的前缀,el-为element-UI的前缀
// ignoreIdentifier: false, //(boolean/string)忽略单个属性的方法,启用ignoreidentifier后,replace将自动设置为true。
// replace: true, // (布尔值)替换包含REM的规则,而不是添加回退。
mediaQuery: false, //(布尔值)允许在媒体查询中转换px。
minPixelValue: 2, //设置要替换的最小像素值(2px会被转rem)。 默认 0
}),
],
},
},
},