当前位置： 首页 > news >正文

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

news 2026/2/7 10:28:48

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

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

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

"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，内容如下：

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配置：

<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组件显示正常。

相关文章：

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

推荐使用postcss插件&#xff0c;它会自动将项目所有的px单位统一转换为vw等单位&#xff08;包括npm安装的第三方组件&#xff09;&#xff0c;从而实现适配&#xff0c;具体配置规则可参考官网或npm网站介绍。 另外对于大屏的适配&#xff0c;需要缩放网页&#xff0c;可使用…...

编程日记 2024/7/9 19:51:17

gitlab-runner安装部署CI/CD

手动安装 卸载旧版&#xff1a; gitlab-runner --version gitlab-runner stop yum remove gitlab-runner下载gitlab对应版本的runner # https://docs.gitlab.com/runner/install/bleeding-edge.html#download-any-other-tagged-releasecurl -L --output /usr/bin/gitlab-run…...

编程日记 2024/7/9 19:50:16

数据分析案例-2024 年全电动汽车数据集可视化分析

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…...

编程日记 2024/7/9 19:49:15

H桥驱动器芯片详解

H桥驱动器芯片详解 上一篇文章讲解了H桥驱动器的控制原理&#xff0c;本文以汽车行业广泛应用的DRV8245芯片为例&#xff0c;详细讲解基于集成电路的H桥驱动器芯片。 1.概述 DRV824x-Q1系列器件是德州仪器&#xff08;TI&#xff09;的一款专为汽车应用设计的全集成H桥驱动器…...

编程日记 2024/7/9 19:48:14

哪个充电宝口碑比较好？怎么选充电宝？2024年口碑优秀充电宝推荐

在如今快节奏的生活中&#xff0c;充电宝已然成为我们日常生活中的必备品。然而&#xff0c;市场上充电宝品牌众多&#xff0c;质量参差不齐&#xff0c;如何选择一款安全、可靠且口碑优秀的充电宝成为了消费者关注的焦点。安全性能不仅关系到充电宝的使用寿命&#xff0c;更关…...

编程日记 2024/7/9 19:46:12

Memcached 介绍与详解及在Java Spring Boot项目中的使用与集成

Memcached 介绍 Memcached 是一种高性能的分布式内存对象缓存系统&#xff0c;主要用于加速动态Web应用以减少数据库负载&#xff0c;从而提高访问速度和性能。作为一个开源项目&#xff0c;Memcached 被广泛应用于许多大型互联网公司&#xff0c;如Facebook、Twitter 和 YouT…...

编程日记 2024/7/9 19:45:11

淮北在选择SCADA系统时，哪些因素会影响其稳定性？

关键字:LP-SCADA系统, 传感器可视化, 设备可视化, 独立SPC系统, 智能仪表系统,SPC可视化,独立SPC系统 在选择SCADA系统时&#xff0c;稳定性是一个关键因素&#xff0c;因为它直接影响到生产过程的连续性和安全性。以下是一些影响SCADA系统稳定性的因素&#xff1a; 硬件质量…...

编程日记 2024/7/9 19:44:09

Linux: 命令行参数和环境变量究竟是什么？

Linux: 命令行参数和环境变量究竟是什么&#xff1f; 一、命令行参数1.1 main函数参数意义1.2 命令行参数概念1.3 命令行参数实例 二、环境变量2.1 环境变量概念2.2 环境变量&#xff1a;PATH2.2.1 如何查看PATH中的内容2.2.2 如何让自己的可执行文件不带路径运行 2.3 环境变量…...

编程日记 2024/7/9 19:42:07

数学系C++ 类与对象 STL（九）

目录 目录 面向对象&#xff1a;py&#xff0c;c艹&#xff0c;Java都是,但c是面向过程 特征&#xff1a; 对象 内敛成员函数【是啥】&#xff1a; 构造函数和析构函数 构造函数 复制构造函数/拷贝构造函数&#xff1a; 【……】 实参与形参的传递方式&#xff1a;值…...

编程日记 2024/7/9 19:41:06

CSS技巧专栏：一日一例 2.纯CSS实现 多彩边框按钮特效

大家好，今天是 CSS技巧一日一例 专栏的第二篇《纯CSS实现多彩边框按钮特效》 先看图： 开工前的准备工作 正如昨日所讲，为了案例的表现，也处于书写的习惯，在今天的案例开工前，先把昨天的准备工作重做一遍。 清除浏览器的默认样式定义页面基本颜色设定body的样式清除butt…...

编程日记 2024/7/9 19:40:05

JCEF 在idea 开发 java 应用

JCEF&#xff08;Java Chromium Embedded Framework&#xff09;是一个Java库&#xff0c;用于在Java应用程序中嵌入Chromium浏览器引擎。如果您想在IDEA开发环境中使用JCEF&#xff0c;您可以按照以下步骤进行操作&#xff1a; 1. 下载JCEF库文件&#xff1a;您可以从JCEF的官…...

编程日记 2024/7/9 19:39:04

绝区伍--2024年AI发展路线图

2024 年将是人工智能具有里程碑意义的一年。随着新模式、融资轮次和进步以惊人的速度出现&#xff0c;很难跟上人工智能世界发生的一切。让我们深入了解 2024 年可能定义人工智能的关键事件、产品发布、研究突破和趋势。 2024 年第一季度 2024 年第一季度将推出一些主要车型并…...

编程日记 2024/7/9 19:35:01

C++：.front()函数作用

在C中&#xff0c;.front() 函数是容器&#xff08;如 std::vector、std::deque、std::list 的某些实现等&#xff09;的成员函数&#xff0c;用于访问容器中的第一个元素。这个函数返回对容器中第一个元素的引用&#xff08;对于非const容器&#xff09;或const引用&#xff0…...

编程日记 2024/7/9 19:34:00

Linux系统备份工具TimeShift

Linux系统备份 Linux系统备份工具TimeShift Linux系统备份工具TimeShift 0. 前言1. 安装2. 启动3. 使用法一、图形界面操作&#xff08;方便&#xff09;法二、终端命令操作&#xff08;高端&#xff09; Linux系统备份工具TimeShift Linux系统备份工具TimeShift 0. 前言 Time…...

编程日记 2024/7/9 19:31:58

Google重大更新--解读Android Auto认证4.3

Google在今年五月更新了Android Auto 4.2.2版本&#xff0c;而在2024年7月他们推出了Android Auto 4.3版本&#xff0c;这是自2023年9月以来对Android Auto 4.2版本的一次重大更新。 为了确保合规性和顺利认证&#xff0c;OEM和Tire1必须确保PDK组件版本与正在认证的主机的Rece…...

编程日记 2024/7/9 19:29:56

scala基础

scala基础&#xff1a; hello world: 写scala可运行文件的注意事项1、如果一个scala文件要运行&#xff0c;class要改成object2、如果是class&#xff0c;就仅单纯代表一个类&#xff0c;如果是object代表的是单例对象3、scala语法中&#xff0c;一句话结束不需要加分号4、scal…...

编程日记 2024/7/9 19:28:54

小红书选品中心商家采集 小红书商家电话采集软件

可采集名称销量评分联系方式等 需要有1000粉丝以上已实名认证过的小红书达人才可以使用 以下是一个示例程序&#xff0c;可以用于批量获取小红书选品中心商家的信息&#xff1a; import requestsdef get_merchants(page_num):url f"https://www.xiaohongshu.com/selec…...

编程日记 2024/7/9 19:27:53

JavaScript基础： JavaScript 数字类型

JavaScript 中的数字类型是用来表示数值的数据类型。JavaScript 的数字类型是基于 IEEE 754 标准的双精度浮点数格式&#xff0c;这意味着它可以表示非常大和非常小的数值&#xff0c;以及小数。 数字字面量 在 JavaScript 中&#xff0c;数字可以直接以字面量的形式书写&…...

编程日记 2024/7/9 19:26:51

【网络安全】漏洞挖掘之Spring Cloud注入漏洞

漏洞描述 Spring框架为现代基于java的企业应用程序(在任何类型的部署平台上)提供了一个全面的编程和配置模型。 Spring Cloud 中的 serveless框架 Spring Cloud Function 中的 RoutingFunction 类的 apply 方法将请求头中的“spring.cloud.function.routing-expression”参数…...

编程日记 2024/7/9 19:24:49

面试官：MySQL死锁是什么，如何解决？

MySQL死锁概述 定义&#xff1a;多个操作相互等待对方释放资源&#xff0c;导致无法继续执行的情况。场景&#xff1a;通常发生在多个事务同时试图锁定对方已锁定的资源时。 MySQL锁的分类 粒度分类&#xff1a; 表级锁&#xff1a;锁定整个表&#xff0c;简单但并发能力低。…...

编程日记 2024/7/9 19:22:46

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2026/2/7 4:19:43

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2026/2/1 19:26:16

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2026/2/2 7:39:34

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2026/1/25 11:13:37

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

编程新知 2026/1/31 8:08:07

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/12/23 17:14:55

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

编程新知 2026/2/1 4:17:33

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2026/1/29 17:12:17

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2026/1/25 13:33:35

CRMEB 中 PHP 短信扩展开发：涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

编程新知 2025/10/5 5:38:24