pc端前端页面适应不同分辨率的问题,vue项目在pc端打开字体自适应
自适应大家得方案大多是rem,但是怎么设置rem的基础值才是关键,较为方便的解决方案就是:阿里可伸缩布局方案 lib-flexiblepx转为rem: px2rem-loader安装这两个插件,安装方法很简单第一步:安装npm i lib-flexible -Snpm i px2rem-loader -D第二步:引入 安装好之后在main.js中引入 lib-flexible...
·
自适应大家得方案大多是rem,但是怎么设置rem的基础值才是关键,
较为方便的解决方案就是:
阿里可伸缩布局方案 lib-flexible
px转为rem: px2rem-loader
安装这两个插件,安装方法很简单
第一步:安装
npm i lib-flexible -S
npm i px2rem-loader -D
第二步:引入 安装好之后在main.js中引入 lib-flexible
import 'lib-flexible'//main.js
第三步:配置参数 在build/utils.js中的cssLoaders里边配置
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 37.5//这是设计稿的尺寸750/10/2
}
}
然后添加到generateLoaders方法的loaders数组里边
function generateLoaders (loader, loaderOptions) {
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader];
const loaders =[cssLoader, px2remLoader];
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
敲黑板了,这个时候你是满足不了,在pc端自适应的,只能在大部分手机展示,因为接下来我们要改源码
第四步:修改源码 找到node_modules文件里边的lib-flexible文件夹,修改flexible.js文件
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {//这里有个插件设置的参数,当它大于540的时候最大用540适配,pc肯定大于540了,它就会以540去自适应,指定不行啊/所以怎么办,搞它
//width = 540 * dpr;
//修改为以宽度设置,我管你多大啊,你有多大我就有多兼容
width = width * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
搞定这时候就可以拿你的移动端项目去pc打开了
更多推荐
已为社区贡献1条内容
所有评论(0)