关于前端:Vue适配PC大屏手机ipad适配

PC+ 大屏适配

可适配 1400px 以上的屏幕

查看演示
我的项目地址

设置设计稿 - 转换 rem

咱们的设计稿是 3840px 宽度，所以 widthOfDesignLayout 设置 3840

module.exports = {
    plugins: {autoprefixer: {},
        "@njleonzhang/postcss-px-to-rem": {
            unitToConvert: "px",
            widthOfDesignLayout: 3840, // 设计稿的宽度
            unitPrecision: 3, // 十进制的单位.
            selectorBlackList: [".ignore", ".hairlines"], // 过滤那些不必转换的 class
            minPixelValue: 1, // 设置要替换的最小像素值.
            mediaQuery: false, // 容许在媒体查问中转换 px
        },
    },
};

设置根节点字体

在 main.js 下，保障在屏幕缩放的过程中也是 16:9 的比列，查看该插件

const dashboardFlexible = require('lib-flexible-for-dashboard');
dashboardFlexible.init(16/9)

开发

设计给出多少就是多少

button {
    width: 465px;
    height: 112px;
}

手机 +ipad 适配

可适配手机 +ipad

演示地址

我的项目地址

转换 Rem

css: {
        loaderOptions: {
            postcss: {
                plugins: [require("postcss-pxtorem")({
                        rootValue: 75, // 换算的基数 1rem = 75px 这个是依据 750px 设计稿来的，如果是 620 的就写 62
                        // 疏忽转换正则匹配项。插件会转化所有的款式的 px。比方引入了三方 UI，也会被转化。目前我应用 selectorBlackList 字段，来过滤
                        // 如果个别中央不想转化 px。能够简略的应用大写的 PX 或 Px。selectorBlackList: ['van-'],
                        propList: ["*"], // 须要做转化解决的属性，如 `hight`、`width`、`margin` 等，`*` 示意全副
                    }),
                ],
            },
        },
    },

设置根节点字体

import 'lib-flexible' 

开发

设计给的是 750px 的设计稿 是多少填多少，比方这个框的高度是 96px 就间接写 96px

设计稿是多少就是多少

height: 72px;
background: rgba(238, 238, 238, 0.5);
border-radius: 36px;

其余解决方案

大屏数据可视化——屏幕适配计划(多分辨率下