vue-cli4 移动端和PC端适配方案

最新推荐文章于 2024-06-01 21:54:01 发布

原创最新推荐文章于 2024-06-01 21:54:01 发布 · 692 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #postcss

前端专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何在项目中利用amfe-flexible实现可伸缩布局，并通过postcss-px2rem将像素转换为rem单位，确保设计稿在不同设备上的响应式适配。

使用amfe-flexible和postcss-px2rem完成适配

amfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。

postcss-px2rem是postcss的插件，用于将像素单元生成rem单位。

1 安装

安装 amfe-flexible
npm install amfe-flexible -S

安装 postcss-px2rem
npm install postcss-px2rem -S

2 在public/index.html中配置mate

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

3 在main.js中引入amfe-flexible

import "amfe-flexible";

4 在项目根目录创建vue.config.js 并配置

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    // 设计稿宽度的1/10
                    require('postcss-px2rem')({remUnit: 75}),
                ]
            }
        }
    }
}

remUnit设置为75（假设设计稿宽度为750, 设计稿宽度的1/10），表示75px将会转化为1rem。

5 重启项目

注意: 行内样式是不生效的, 如不想做适配则把样式写在行内中