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

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

news 2025/9/14 23:09:46

推荐使用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

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/9/13 15:30:50

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

编程新知 2025/8/10 5:27:29

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/8/31 5:08:06

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

编程新知 2025/9/14 12:35:00

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/9/12 15:10:44

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2025/7/18 1:50:27

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

编程新知 2025/9/12 23:21:57

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/8/27 4:07:51

Python 实现 Web 静态服务器（HTTP 协议）

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

编程新知 2025/9/7 2:24:50