美文网首页
Vue移动端适配

Vue移动端适配

作者: 扶得一人醉如苏沐晨 | 来源:发表于2024-01-09 12:11 被阅读0次

    实现方式

    postcss-pxtorem:将px转换为rem
    amfe-flexible:为html、body添加font-size,窗口调整时候重新设置font-size
    autoprefixer 为css添加兼容性前缀

    一、安装

    npm install postcss-pxtorem --save-dev
    npm install amfe-flexible --save
    npm i autoprefixer
    

    安装报错解决--版本兼容性问题--指定安装版本

    npm install postcss-pxtorem@5.1.1 --save-dev
    npm install amfe-flexible@2.2.1 --save
    

    二、使用

    2.1. main.js 引入amfe-flexible

    // 导入js文件 根据窗口调整html-font-size大小
    import "amfe-flexible";
    

    2.2. 根目录创建postcss.config.js配置文件

    注意:如果是 Vue3 + Vite 需要把.js改为.cjs

    安装autoprefixer, 否则编译会报错

    module.exports = {
      plugins: {
        // 为css添加兼容性前缀
        autoprefixer: {
          overrideBrowserslist: [
            "Android 4.1",
            "iOS 7.1",
            "Chrome > 31",
            "ff > 31",
            "ie >= 8",
            "last 10 versions", // 所有主流浏览器最近10版本用
          ],
          grid: true,
        },
        "postcss-pxtorem": {
          // 设计稿宽度的1/10  如375px-->37.5
          rootValue: 37.5,
          // 需要做转化处理的属性,如hight、width、margin.. *代表全部
          propList: ["*"],
          // 精度
          unitPrecision: 5,
        },
      },
    };
    

    三、Vue2.7版本以上,,postcss-pxtorem这个插件不可以将行内style样式的px转成rem

    3.1. 如何解决???

    手动转

    3.2. 封装一个工具类

    /**
     * 解决postcss不能将行内样式转为rem的问题
     * @params { Number | String } px 需要转换的像素值(Number) 也可以是百分数(String)
     * @return 如果是百分数不做处理 如果是像素值 手动转rem
     * 37.5 就是postcss.config.cjs配置文件的rootValue
     *  */
    export function px2rem(px) {
      if (/%/gi.test(px)) return px;
      else return parseFloat(px) / 37.5 + "rem";
    }
    

    3.3. 挂载到全局--我用的是Vue3

    import { px2rem } from "@/utils/index";
    import App from "./App.vue";
    const app = createApp(App);
    app.provide("px2rem", px2rem);
    

    3.4. 使用

    <script setup>
    import { inject } from "vue";
    const px2rem = inject("px2rem");
    </script>
    
    <nav class="m-nav" :style="{ top: px2rem(top) }"></nav>
    

    相关文章

      网友评论

          本文标题:Vue移动端适配

          本文链接:https://www.haomeiwen.com/subject/pbtandtx.html