当前位置: 代码迷 >> 综合 >> 移动端页面适配(px2rem)
  详细解决方案

移动端页面适配(px2rem)

热度:11   发布时间:2024-03-06 13:05:44.0

1、安装

引入lib-flexible . 安装lib-flexible:  npm i lib-flexible --save在项目的入口main.js文件中引入lib-flexible: import 'lib-flexible'

一定不要忘了是在main.js中

2、使用和安装px2rem  

使用postcss-px2rem自动将css中的px转换成rem(真的是大大提升了我们的工作效率,棒棒的,不用自己去瞎算啊)安装postcss-px2rem :  npm install postcss-px2rem --save-dev

3. 移除public中index.html中关于viewport的meta标签 好像不移除也没事

根目录下新建vue.config.js,加入配置项 (cli4中好像不移除也没事) 改了设计稿,需要重新启动服务 

module.exports = {// devServer: {//   proxy: {//     '/ajax': {//       target: 'http://m.maoyan.com',//       // ws: true,//       changeOrigin: true//     },//     '/foo': {//       target: '<other_url>'//     }//   }// },lintOnSave: false ,css: {loaderOptions: {css: {// options here will be passed to css-loader},postcss: {// options here will be passed to postcss-loaderplugins: [require('postcss-px2rem')({remUnit:75,//设计稿的 十分之一"exclude": /node_modules/i})]}}}}