Vue適配PC+大屏適配,手機+ipad適配

PC+大屏適配

可適配 1400px以上的屏幕css

image.png

查看演示 項目地址html

設置設計稿-轉換rem

咱們的設計稿是3840px寬度,因此widthOfDesignLayout設置3840git

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的比列,查看該插件github

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

開發

image.png

設計給出多少就是多少web

button {
    width: 465px;
    height: 112px;
}
複製代碼

手機+ipad適配

可適配手機+ipadmarkdown

演示地址oop

項目地址post

轉換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字體

image.png

設計稿是多少就是多少flex

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

其餘解決方案

大屏數據可視化——屏幕適配方案(多分辨率下

相關文章
相關標籤/搜索