前端如何让网页页面完美适配不同大小和分辨率屏幕

推荐使用postcss插件,它会自动将项目所有的px单位统一转换为vw等单位(包括npm安装的第三方组件),从而实现适配,具体配置规则可参考官网或npm网站介绍。

另外对于大屏的适配,需要缩放网页,可使用autojs,参考https://blog.csdn.net/m0_71231013/article/details/131650562 。但它只能放大或缩小页面(适合做大屏项目使用),不能让页面字体、div宽高等自动依据屏幕分辨率适配。

我的vue3项目使用postcss,首先在devDependencies安装了以下包:

javascript 复制代码
"postcss": "^8.4.38",
"postcss-import": "^16.1.0",
"postcss-loader": "^8.1.1",
"postcss-px-to-viewport": "^1.1.1",
"postcss-px-to-viewport-opt": "^0.0.4",

随后,参考官网和一些参考资料,在项目根目录(和package.json平级)新建配置文件postcss.config.js,内容如下:

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

最后,如果使用了element-plus的el-message组件,它不能被postcss自动转换,需要自己在项目根目录的index.html的head配置:

html 复制代码
<head>
  <meta charset="UTF-8" />
  <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
  <link rel="icon" type="image" href="/AI.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>标题</title>
  <style>
    .el-message {
      font-size: 16px;
    }
  </style>
</head>

这样就配置完成了!无论是在浏览器随意缩放,或者换不同的浏览器查看,网页都能完美适配!

我总结出写项目应遵循以下适配规则:

  1. 在App.vue页面设置全局的字体颜色、字体大小作为项目默认,避免意外情况,让页面宽100vw,高100vh

  2. font-size等单位不要用large、medium等没有明确单位的写法!!!全部禁用px单位,特别是1px、2px这种无法被postcss转换的微小长度!统一用vw、vh或者百分比;

  3. 记得电脑系统、浏览器调成深色模式,观察网站是否会有文字变白等异常现象并修复;

  4. 可以将网页用浏览器的手机显示模式,调整网页大小,例如1920×1080,观察不同大小模式网页是否适配;将网页进行缩放,观察不同缩放倍率下,是否出现不适配问题。

  5. 完成适配具体做法:安装postcss,项目根目录新建配置文件postcss.config.js,记得别用exclude排除node_modules,否则postcss无法将包里的px样式也一起转为vw;对于el-message组件,单独在项目的index.html文件的style里,设置 .el-message { font-size: 16px;},即可保证el-message组件显示正常。

相关推荐
__不想说话__26 分钟前
面试官问我React组件和state的关系,我指了指路口的红绿灯…
前端·javascript·react.js
一个小潘桃鸭29 分钟前
需求:对表格操作列中的操作进行局部刷新
前端
番茄比较犟30 分钟前
Combine知识点switchToLatest
前端
北京_宏哥30 分钟前
🔥《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(15)-Charles如何配置反向代理
前端·面试·charles
Process33 分钟前
前端图片技术深度解析:格式选择、渲染原理与性能优化
前端·面试·性能优化
大松鼠君34 分钟前
轿车3D展示
前端·webgl·three.js
大林i瑶34 分钟前
svg按钮渐变边框
css·svg
却尘35 分钟前
URL参数传递的两种方式:查询参数与路径参数详解
前端
下辈子再也不写代码了37 分钟前
分片下载、断点续传与实时速度显示的实现方法
前端·后端·github
婷婷婷婷38 分钟前
AntV X6 常用方法
前端