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，比较推荐的一种方案