vue自适应处理
2019-04-25 本文已影响102人
魅眼ALong
采用淘宝的lib-flexible的库,来做屏幕自适应处理。
rem的大小由网页根元素html决定,所以通过设置html的字体大小就可以控制rem的大小,如
html{ font-size:100px; }
.box{ width:1rem; } //此时 1rem = 100px
1.安装felxible库。
npm i lib-flexible --save
yarn add lib-flexible //使用yarn
2.在main.js中引入lib-flexible
import 'lib-flexible'
3.index.html中设置meta标签
<meta name="viewport" content="width=device-width,initial-scale=1.0">
如果在项目中大小直接用rem,1,2,3步骤已经可以实现!
接着,我们在项目中,写css的时候将px转成rem,我们可以借助px2rem工具,
1.首先需要安装
npm i px2rem-loader --save-dev
yarn add px2rem-loader //使用 yarn 安装
2.配置,在build/until.js中 找到 cssLoader
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const px2remLoader = {
loader : 'px2rem-loader',
options : {
//这个参数是通过psd设计稿的 宽度 / 10 来计算,这里以750为标准
remUnit : 37.5
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
放到 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
})
})
}
重启项目,设计稿中定义多少px,就直接写多少px。