前端怎样让网页页面完满适配差异巨细和分辨率屏幕

保举使用postcss插件，它会主动将项目全部的px单元同一转换为vw等单元（包罗npm安装的第三方组件），从而实现适配，详细设置规则可参考官网或npm网站先容。
别的对于大屏的适配，须要缩放网页，可使用autojs，参考https://blog.csdn.net/m0_71231013/article/details/131650562 。但它只能放大或缩小页面（恰当做大屏项目使用），不能让页面字体、div宽高等主动依据屏幕分辨率适配。
我的vue3项目使用postcss，起首在devDependencies安装了以下包：

1. "postcss": "^8.4.38",
2. "postcss-import": "^16.1.0",
3. "postcss-loader": "^8.1.1",
4. "postcss-px-to-viewport": "^1.1.1",
5. "postcss-px-to-viewport-opt": "^0.0.4",
6. "autoprefixer": "^10.4.20",

复制代码

随后，参考官网和一些参考资料，在项目根目次（和package.json平级）新建设置文件postcss.config.js，内容如下：

1. export default {
2.   plugins: {
3.     'autoprefixer': {
4.       path: ['./src/*']
5.     },
6.     'postcss-import': {},
7.     'postcss-px-to-viewport-opt': {
8.       'viewportWidth': '1707', // 我的视窗宽度
9.       'viewportHeight': '791', // 我的视窗高度
10.       'unitPrecision': 5, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除)
11.       'viewportUnit': 'vw', // 指定需要转换成的视窗单位，建议使用vw
12.       'selectorBlackList': ['#nprogress'], // 指定不转换为视窗单位的类
13.       'minPixelValue': 1, // 小于或等于`1px`不转换为视窗单位
14.       'mediaQuery': false, // 允许在媒体查询中转换`px`
15.       // 'exclude': /(\/|\\)(node_modules)(\/|\\)/, // 可以自定义规则哪些文件不要转换，例如这句让包里的不会转换，但通常无需配置
16.     }
17.   }
18. }

复制代码

末了，假如使用了element-plus的el-message组件，它不能被postcss主动转换，须要自己在项目根目次的index.html的head设置：

1. <head>
2.   <meta charset="UTF-8" />
3.   <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
4.   <link rel="icon" type="image" href="/AI.png" />
5.   <meta name="viewport" content="width=device-width, initial-scale=1" />
6.   <title>标题</title>
7.   <style>
8.     .el-message {
9.       font-size: 16px;
10.     }
11.   </style>
12. </head>

复制代码

如许就设置完成了！无论是在欣赏器随意缩放，大概换差异的欣赏器查察，网页都能完满适配！
我总结出写项目应遵照以下适配规则：

• 在App.vue页面设置全局的字体颜色、字体巨细作为项目默认，克制不测环境，让页面宽100vw，高100vh
  
• font-size等单元不要用large、medium等没有明确单元的写法！！！全部禁用px单元，特别是1px、2px这种无法被postcss转换的微小长度！同一用vw、vh大概百分比；
  
• 记得电脑体系、欣赏器调成深色模式，观察网站是否会有笔墨变白等非常征象并修复（在App.vue中，设置 #app { color: #213547; } 即可）；
  
• 为项目设置好rem，在项目标index.html的header标签的style标签里，写 html { font-size: 16px; } 如许就设置了rem是16px；
  
• 可以将网页用欣赏器的手机表现模式，调解网页巨细，比方1920×1080，观察差异巨细模式网页是否适配；将网页举行缩放，观察差异缩放倍率下，是否出现不适配标题。
  
• 完成适配详细做法：安装postcss，项目根目次新建设置文件postcss.config.js，记得别用exclude打扫node_modules，否则postcss无法将包里的px样式也一起转为vw；对于el-message组件，单独在项目标index.html文件的style里，设置 .el-message { font-size: 16px;}，即可包管el-message组件表现正常。