vue-cli3.0结合lib-flexible、px2rem实现移动端适配,完美解决第三方ui库样式变小问题(转)
转自:https://www.cnblogs.com/skylineStar/p/10036525.html公司有一个项目是vue-cli3.0结合lib-flexible、px2rem并且用了vant的ui组件。与链接中的情况一样,就是用了px2rem之后,vant的样式变小了。第一部分:项目中引入lib-flexible一、项目中安装lib-flexiblenpm install l...
转自:https://www.cnblogs.com/skylineStar/p/10036525.html
公司有一个项目是vue-cli3.0结合lib-flexible、px2rem并且用了vant的ui组件。
与链接中的情况一样,就是用了px2rem之后,vant的样式变小了。
注意看到最下的补充,否则vant的样式还是变小
第一部分:项目中引入lib-flexible
一、项目中安装lib-flexible
npm install lib-flexible --save
二、在项目的入口main.js文件中引入lib-flexible
import 'lib-flexible'
第二部分:使用postcss-px2rem自动将css中的px转换成rem
一、安装postcss-px2rem
npm install postcss-px2rem --save-dev
vue中配置 在build下的 utils.js中,找到generateLoaders 方法,在这里添加 。
var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75//设计稿宽度/10
// // 这是rem适配的配置 注意: remUnit在这里要根据lib-flexible的规则来配制,如果您的设计稿是750px的,用75就刚刚好。
}
};
// generate loader string to be used with extract text plugin
function generateLoaders(loader, loaderOptions) {
var loaders = [cssLoader, px2remLoader];//添加px2rem 插件
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
---------------------
作者:LingRuiBin
来源:CSDN
原文:https://blog.csdn.net/qq_29484537/article/details/77977877
但是用vant组件时,发现vant的样式都变小了,因为:
变小的主要原因是第三库 css一依据 data-dpr=“1” 时写的尺寸
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
解决方案一:
将第三方组件的css文件复制出来第三方库的css代码px统一扩大2倍,或者用全局替换将px替换为px/no/。我觉的这个方案不太好没有采用,具体操作可以参考以下两篇文章:https://segmentfault.com/a/1190000014575890 和 https://blog.csdn.net/weixin_42464312/article/details/82769805。
解决方案二:
使用postcss-px2rem-exclude,网上好多说用这个方法不起作用,经过一个下午的折腾才发现是使用方法不对,我的错误方法就不跟你们说了,直接来正确的。
首先,需要卸载项目中的postcss-px2rem。npm uninstall postcss-px2rem --save-dev
其次,安装postcss-px2rem-exclude。 npm install postcss-px2rem-exclude --save
最后是配置exclude选项,需要注意的是这个配置在vue.config.js中式不起作用的,如图。
正确的配置位置是项目根目录下的postcss.config.js文件或者.postcssrc.js,如果你的项目没有生成这个独立文件,就需要在你的package.js里设置。
module.exports = {
plugins: {
autoprefixer: {},
"postcss-px2rem-exclude": {
remUnit: 75,
exclude: /node_modules|folder_name/i
//folder_name如 vant
}
}
};
2019.3.6补充:
新开展的项目中用了以上步骤,ui样式还是缩小了,因为meta中的initial-scale=0.5(在ip6下) flexible的自动转化。
因此 要在index.html中用来覆盖掉它。
更多推荐
所有评论(0)