Vue adapts to PC+large screen, mobile phone+ipad adapts

PC+ big screen adaptation

Can be adapted to screens above 1400px

View demo
project address

Set design draft-convert rem

Our design draft is 3840px width, so widthOfDesignLayout set to 3840

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

Set root node font

Under main.js, ensure that the ratio of 16:9 is also in the process of screen zooming, check the plug-in

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

Development

Design as much as possible

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

Mobile phone + ipad adaptation

Compatible with mobile phone + ipad

demo address

project address

Convert 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`等，`*`表示全部
                    }),
                ],
            },
        },
    },

Set root node font

import 'lib-flexible' 

Development

What the design gives is how much to fill in the 750px design draft. For example, if the height of this box is 96px, just write 96px

Design draft is as much

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

Other solutions

large-screen data visualization-screen adaptation scheme (