前端开发Vue项目使用flexible+rem实现移动端自适应

前端开发金融业务流程外包
前端实际开发流程
前端开发流程

项目安装flexible px2rem
npm i lib-flexible –save
npm i px2rem-loader –save-dev

入口文件引入flexible
main.js文件 import ‘lib-flexible’

webpack生成的vue-cli项目更改配置
文件 build/utils.js
修改

const cssLoader = {
    loader: ‘css-loader’,
    options: {
        sourceMap: options.sourceMap,
        importLoaders: 2,
    },
}

增加

const px2remLoader = {
    loader: ‘px2rem-loader’,
    options: {
        remUnit: 75,
    },
}

remUnit的值根据设计稿来,这里是750的设计稿

修改
const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]

unity前端开发流程
小公司前端开发流程
前端开发的流程
» 本文来自:前端开发者 » 《前端开发Vue项目使用flexible+rem实现移动端自适应》
» 本文链接地址:https://www.rokub.com/7786.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!