vue项目PC端如何适配不同分辨率屏幕字体和整体布局适应(一)
·
第一部分:项目中全局引入lib-flexible
1.项目全局中安装lib-flexible
npm install lib-flexible --save
2、在项目的入口main.js文件中引入lib-flexible
import 'lib-flexible'
3. 打开./node_modules/lib-flexible/flexible.js,找到如下片段源码:
(1).

(2).

(3).

源码如下:
if (width / dpr > 540) {
width = width * dpr;
}
第二部分:使用postcss-px2rem-exclude自动将css中的px转换成rem
1、安装postcss-px2rem-exclude
npm install postcss-px2rem-exclude --save
2、配置 postcss-px2rem-exclude
方法(1).在项目的根目录下找到文件.postcssrc.js,在里面添加如下代码
module.exports = {
"plugins": {
// to edit target browsers: use "browserslist" field in package.json
"postcss-import": {},
"autoprefixer": {},
"postcss-px2rem-exclude": { // 添加的代码
remUnit: 75,
exclude: /node_modules|folder_name/i // 忽略node_modules目录下的文件
}
}
}
方法(2).若没有.postcssrc.js这个文件的话,就找配置文件里面的package.json打开,下面代码整体添加到里面,也可行
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px2rem-exclude": {
"remUnit": 192,
"exclude": "/node_modules|floder_name/i"
}
}
}
主要应用:lib-flexible和postcss-px2rem-exclude
最后重启项目,即可生效!!!
**
最后注意的是:不能写在行内样式,也就是body里面的div的style里面,不然不生效lib-flexible和postcss-px2rem-exclude,布局会很乱,文章好的话记得点个心心和关注,有错的地方麻烦指正一下,多谢!!!
**
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)