在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
方案
安装依赖npm install px2rem-loader -D npm install lib-flexible -S 引入依赖
import 'lib-flexible' px转换成rem
const cssLoader = { loader: 'css-loader', options: { sourceMap: options.sourceMap } } // 增加代码,px转rem配置(需要将px2remloader添加进loaders数组中) const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 192, //根据视觉稿,rem为px的十分之一,1920px 192 rem // remPrecision: 8//换算的rem保留几位小数点 } } 放进loaders数组中 // generate loader string to be used with extract text plugin 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 }) }) } //... } 修改flexible.js全局搜索 将代码修改为适应PC端的代码 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; } 对于不想被转换的样式,可在其后添加 参考博客VUE PC端适应方案flexible + px2remLoader 到此这篇关于Vue实现PC端分辨率自适应的示例代码的文章就介绍到这了,更多相关Vue PC端分辨率自适应 内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界! |
请发表评论