vue学习经验总结（移动端适配）

秒速五厘米 2022-11-28 13:52 140阅读 0赞

使用vue框架来写移动端的页面适配

## 1.引入lib-flexible ##

安装：npm i lib-flexible --save

## 2.使用postcss-px2rem自动将css中的px转换成rem ##

安装：npm i postcss-px2rem --save-dev

## 3.移除public中的index.html中关于viewport 的meta标签（不移除没没事） ##

## 4.在根目录src中新建一个vue.config.js 加入配置项，然后记得重启服务 ##

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-loader
                        plugins: [require('postcss-px2rem')({
                                  remUnit:75,//设计稿的 十分之一
                                  "exclude": /node_modules/i
                        })]
                   }
              }
          }
      }

## 5.sass的引用 ##

安装 ：npm i node-sass --save-dev
                    npm i sass-loader --save=dev
       使用时在style中加入lang="scss"就行，局部样式加scoped

发表评论取消回复

表情：

评论列表（有 0 条评论，140人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue项目，移动端rem适配（rem移动端适配）

1、首先需要安装第三方插件，这是我们使用自动将 px 单位转化为 rem 单位的插件，命令如下： //可以将 px 单位自动转化为 rem 单位 npm in

朱雀/ 2023年10月02日 23:41/ 0 赞/ 203 阅读

相关 vue中移动端适配

最近需要完全新建vue项目,基于vue-cl3搭建项目框架时，又开始纠结px,rem等单位问题，看了很多博客目前最好用的单位是rem、vw 目前最常用的适配方案是：

浅浅的花香味﹌/ 2023年08月17日 16:27/ 0 赞/ 174 阅读

相关 vue 移动端适配

这里我写一下我自己用的vue 移动端适配，可能跟别人的不一样。但是效果是一样的。我是安装 amfe-flexible npm i -S amfe-fle

快来打我*/ 2023年06月26日 10:42/ 0 赞/ 41 阅读

相关移动端适配总结

1.[ 前端移动端适配总结][Link 1] 2. [移动端三种适配方案][Link 2] 3.[前端解决移动端适配的五种方法][Link 3] 4.[移动端前端适

缺乏、安全感/ 2023年02月14日 00:28/ 0 赞/ 43 阅读

相关 vue移动端适配

如果不想转化成rem单位，可以把px写成大写的PX，就可以是px单位了哦 1、安装插件 npm i lib-flexible --save // 载l

￡神魔★判官ぃ/ 2022年12月20日 15:59/ 0 赞/ 232 阅读

相关 Vue移动端尺寸适配

安装依赖包 > npm install amfe-flexible > npm install postcss-px2rem 在项目入口文件main.js中引入l

忘是亡心i/ 2022年12月18日 14:55/ 0 赞/ 262 阅读

相关 vue学习经验总结（移动端适配）

使用vue框架来写移动端的页面适配 1.引入lib-flexible 安装：npm i lib-flexible --save 2.使用postcss-px

秒速五厘米/ 2022年11月28日 13:52/ 0 赞/ 141 阅读

相关移动端适配

转自：/images/20220528/a9ac319170c44a5d85b86b4f83df39bf.png 大多都是介绍手淘团队的[flexible.js][

怼烎@/ 2022年05月27日 23:28/ 0 赞/ 453 阅读

相关移动端适配

移动端适配 1、html <meta name="viewport" content="width=device-width,initial-scale=1.0

冷不防/ 2022年01月29日 03:13/ 0 赞/ 501 阅读

相关移动端适配

在上一片文章里，关于如何使用rem进行布局，我作了一个大概的描述。今天这篇文字，主要说一个东西－dpr。我们都知道，移动端开发，运行的平台主要是 ios 和 andr

野性酷女/ 2022年01月25日 18:23/ 0 赞/ 494 阅读