做屏幕自适应处理

252 阅读1分钟

第一步:

安装felxible库:

npm i lib-flexible -S

第二步:

在主文件main.js里面引入:import 'lib-flexible' 第三步: 在index.html文件中设置meta标签:

<meta name='viewport' content='width=device-width , initial-scale=1.0'>

第四步:

安装px2rem这个工具:

npm i px2rem-loader -D

第五步:

在until.js配置文件对loader做相关配置:

  const px2remLoader = {
    loader : 'px2rem-loader',
    options : {
    //这个参数是通过psd设计稿的  宽度 / 10 来计算,这里以750为标准
    remUnit : 75  
    }
}

然后将utils.js文件中的generateLoaders函数的loaders常量改为[cssLoader, px2remLoader]

const loaders = [cssLoader, px2remLoader];