方法一，vue3.0 pc端自适配方案
1.引入插件使用yarn或者npm
yarn add px2rem-loader -S
yarn add postcss-px2rem -S
yarn i lib-flexible -S
npm install px2rem-loader -S
npm install postcss-px2rem -S
npm i lib-flexible -S
2.vue3.0由于没有build配置文件，在根目录新建文件vue.config.js（用来解决跨域或者配置文件）
const autoprefixer = require ('autoprefixer');
const px2rem = require('postcss-px2rem')
const postcssRem = px2rem({
remUnit: 16
})
module.exports = {
publicPath: "./",
lintOnSave: true,
css: {
loaderOptions: {
postcss: {
plugins: [
postcssRem
]
}
}
}
};
另一种：
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 192
})
]
}
}
},
}
3.在src下新建util/flexible.js文件
(function(win, lib) {
var doc = win.document;
var docEl = doc.documentElement;
var metaEl = doc.querySelector('meta[name="viewport"]');
var flexibleEl = doc.querySelector('meta[name="flexible"]');
var dpr = 0;
var scale = 0;
var tid;
var flexible = lib.flexible || (lib.flexible = {});
if (metaEl) {
console.warn('将根据已有的meta标签来设置缩放比例');
var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
if (match) {
scale = parseFloat(match[1]);
dpr = parseInt(1 / scale);
}
} else if (flexibleEl) {
var content = flexibleEl.getAttribute('content');
if (content) {
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
if (initialDpr) {
dpr = parseFloat(initialDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
if (maximumDpr) {
dpr = parseFloat(maximumDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
}
}
if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
dpr = 1;
}
scale = 1 / dpr;
}
docEl.setAttribute('data-dpr', dpr);
if (!metaEl) {
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
}
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = width * dpr;
}
var rem = width / 100;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
win.addEventListener('resize', function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === 'complete') {
doc.body.style.fontSize = 12 * dpr + 'px';
} else {
doc.addEventListener('DOMContentLoaded', function(e) {
doc.body.style.fontSize = 12 * dpr + 'px';
}, false);
}
refreshRem();
flexible.dpr = win.dpr = dpr;
flexible.refreshRem = refreshRem;
flexible.rem2px = function(d) {
var val = parseFloat(d) * this.rem;
if (typeof d === 'string' && d.match(/rem$/)) {
val += 'px';
}
return val;
}
flexible.px2rem = function(d) {
var val = parseFloat(d) / this.rem;
if (typeof d === 'string' && d.match(/px$/)) {
val += 'rem';
}
return val;
}
})(window, window['lib'] || (window['lib'] = {}));
4.在main.js里面引入即可
import './util/flexible.js'
方法二，vue2.0 pc端自适配方案
1.安装依赖
npm install px2rem-loader -D px转rem
npm install lib-flexible -S 阿里可伸缩布局方案
引入：
import 'lib-flexible'
2.px转换成rem修改文件：
vue-loader的options和其他样式文件loader最终是都是由build/utils.js里的方法生成的，我们只需在cssLoader后再加上一个px2remLoader即可，px2rem-loader的remUnit选项意思是 1rem=多少像素，结合lib-flexible的方案，我们将px2remLoader的options.remUnit设置成设计稿宽度的1/10，这里假设设计稿宽为1920px：
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 192,
}
}
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
})
})
}
}
3.修改flexible.js
修改flexible.js，在node_modules里面搜，
修改为如下代码：
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = width * dpr;
}
var rem = width / 8;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
4.复制文件，重新引用
接下来把这个文件复制出来，放到lib文件下
然后在main.js中
把import 'lib-flexible'改成import './lib/lib-flexible',
这样就可以在所有项目同步了，不用每个人都改了。
对于不想被转换的样式，可在其后添加/no/保证不被转换：
border-bottom-width: 1px;
方法三，其他vue项目，pc端屏幕自适应的方法：
第一步 安装lib-flexible
npm i lib-flexible --save
第二步 在项目入口文件main.js中引入lib-flexible
import 'lib-flexible/flexible.js'
第三步 在项目根目录的index.html 头部删除自动生成的meta标签, lib-flexible会根据屏幕自动生成相对于的meta标签
// 删除
<meta name="viewport" content="width=device-width, initial-scale=1.0">
第四步 使用postcss-pxtorem，用于将像素单元生成rem单位。
npm install postcss-pxtorem -D
第五步 设置规则（在package.json中配置如下）
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 64,
"propList": [
"*"
]
}
}
},
可能的报错处理：PostCSS plugin postcss-pxtorem requires PostCSS 8.
去到package.json文件查看postcss-pxtorem的版本,因为就是它的版本过高了,所以导致这个问题的出现
你只需要把的版本降低到5.1.1就OK了
|