vue2中做移动端适配(淘宝方案)

1.下载lib-flexible淘宝适配插件

npm i lib-flexible -s

2.在main.js文件中导入全局的lib-flexible

import 'lib-flexible'

3.下载postcss-px2rem插件自动将px转rem单位

npm i postcss-px2rem -s

4.在vue.config.js文件中的css属性进行基本配置

css: {  // 预先处理css

        loaderOptions: {   // 加载器 处理样式

          css: {},

          postcss: {                                            // 样式代码处理

            plugins: [                                            // 插件配置

              require("postcss-px2rem")({             // 引入单位转换插件

                remUnit:37.5,                                   // 设计稿尺寸 375    根字体大小37.5

                exclude:/node_modules/i                  // 不包含文件

              })

            ]

          }

        }

    }

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3进行移动端适配的方法可以使用amfe-flexible和postcss-pxtorem。在Vue2,我们可以使用lib-flexible和postcss-pxtorem进行适配,但是在Vue3,lib-flexible已经被弃用了。所以,推荐使用amfe-flexible和postcss-pxtorem来进行适配。这两个工具也被Vant推荐使用,因为它们能够很好地满足移动端适配的需求。在项目可以添加如下的meta标签来设置viewport的属性,以保证适配的效果: ```html <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover, user-scalable=no"> ``` 除了使用amfe-flexible和postcss-pxtorem,有些开发者可能还会选择使用以前在原生开发使用的适配方案,尤其是需要同时兼顾PC端和WAP端的项目。具体的使用方法可以参考之前写的文章。总的来说,在Vue3进行移动端适配可以使用amfe-flexible和postcss-pxtorem这两个工具来实现。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue3移动端适配的解决方案](https://blog.csdn.net/weixin_42063951/article/details/127734001)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* [vue3搭建移动端项目(3)-移动端px适配方案](https://blog.csdn.net/weixin_40220492/article/details/126329001)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值