PC端適配各種分辨率解決方案

1.通過不同分辨率加載響應分辨率的css樣式表

<link href="css/test.css" media="screen and (max-device-width=1024px)">

2.通過 @media screen 適配不同分辨率的樣式

@mediao screen and (max-width:1920){

}

3.vh/vw 或者百分比 也可以用 UI 組件中的 布局

4.vue項目可以 引入 lib-flexible 和 postcss-px2rem

//main.js 中引入lib-flexible
import 'lib-flexible'

//vue.config.js  配置 postcss-px2rem 插件
module.expors = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('post-px2rem')({
                        remUnit: 60
                    })
                ]
            }
        }
    },
    publicPath: './',
    assetsDir: 'static',
    productionSourceMap: false,
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [],
        },
    },
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
    },
}

總結

前兩種都是根據屏幕大小，寫響應的css樣式，這樣比較麻煩，需要寫很多css
第三種在頁面可以滾動，高度要求不高，或者縮放比較較小時使用
第四種 適用於Vue 項目，可以兼容分辨率范圍更大，不必寫很多css，比較推薦的一種方案