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

【CSS进阶】常见的页面自适应的方法

news 2026/4/28 3:15:09

在前端开发中，自适应布局（Responsive Design）是一种让网页能够适应不同屏幕尺寸、设备和分辨率的技术。常见的自适应布局方法包括 流式布局、弹性布局（Flexbox）、栅格布局（Grid）、媒体查询（Media Queries）、rem/vw/vh 等单位 以及 CSS 框架（如 Bootstrap）。

1. 媒体查询（Media Queries）

媒体查询 是 CSS 实现自适应布局的核心技术之一，允许根据屏幕尺寸、设备类型、分辨率等条件来应用不同的 CSS 样式。

示例：针对不同设备应用不同的 CSS

/* 默认样式：适用于大屏幕设备 */
body {font-size: 18px;background-color: lightblue;
}/* 平板设备（屏幕宽度小于 1024px 时） */
@media screen and (max-width: 1024px) {body {font-size: 16px;background-color: lightgreen;}
}/* 手机设备（屏幕宽度小于 768px 时） */
@media screen and (max-width: 768px) {body {font-size: 14px;background-color: lightcoral;}
}

原理：

当屏幕宽度小于 1024px 时，字体大小调整为 16px，背景变为绿色。
当屏幕宽度小于 768px 时，字体大小调整为 14px，背景变为红色。

适用场景：

适用于不同设备的 UI 适配，如 PC、平板、手机。
可以精细控制不同屏幕下的布局和样式。

2. 弹性布局（Flexbox）

Flexbox（弹性盒模型） 是 CSS3 提供的一种强大的布局方式，适用于一维（单行或单列）布局，能够自动调整子元素的大小和位置，以适应不同的屏幕尺寸。

示例：使用 Flexbox 让页面元素自动调整

.container {display: flex;flex-wrap: wrap;  /* 自动换行 */justify-content: space-between; /* 平均分布 */
}.item {width: 30%;height: 100px;background-color: skyblue;margin: 10px;text-align: center;line-height: 100px;font-size: 18px;
}
<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div>
</div>

原理：

display: flex; 让 .container 变成一个 弹性盒子。
flex-wrap: wrap; 允许子元素自动换行，适应小屏幕。
justify-content: space-between; 使子元素平均分布。

适用场景：

适用于 水平、垂直居中布局。
等比伸缩 的布局，如 导航栏、卡片式布局、列表。

3. 栅格布局（CSS Grid）

Grid（CSS 栅格布局） 是 CSS3 提供的一种二维布局方式，可以定义行（row）和列（column），创建复杂的响应式布局。

示例：使用 CSS Grid 创建响应式网格布局

.container {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 10px;
}.item {background-color: lightseagreen;padding: 20px;text-align: center;color: white;font-size: 18px;
}
<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div>
</div>

原理：

```
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
```
- auto-fit 自动填充合适的列数。
- minmax(200px, 1fr) 让列的最小宽度为 200px，最大宽度自动扩展。
gap: 10px; 控制网格间距。

适用场景：

适用于 复杂的网格布局，比如 新闻网站、相册。
自适应表格 和 卡片式布局。

4. 使用 `rem`、`vw` 和 `vh` 单位

4.1 rem（相对字体大小）

rem 是相对于 HTML 根元素（<html>）的 font-size 进行计算的，适用于字体大小的自适应设计。

html {font-size: 16px;  /* 默认字体大小 */
}h1 {font-size: 2rem;  /* 2 × 16px = 32px */
}p {font-size: 1rem;  /* 1 × 16px = 16px */
}

4.2 `vw` 和 `vh`（视口单位）

vw（视口宽度的百分比）和 vh（视口高度的百分比）可以用于适应不同的屏幕尺寸。

.container {width: 80vw;  /* 视口宽度的 80% */height: 50vh; /* 视口高度的 50% */
}

适用场景：

rem 适用于 字体自适应。
vw/vh 适用于 全屏背景、弹窗、视频播放区域。

5. 使用 CSS 框架（如 Bootstrap）

Bootstrap 是一个流行的前端框架，提供了内置的 响应式栅格系统，能够快速构建适配各种设备的网页。

示例：使用 Bootstrap 实现自适应布局

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap 响应式布局</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body><div class="container"><div class="row"><div class="col-md-4 col-sm-6 col-12">栏目1</div><div class="col-md-4 col-sm-6 col-12">栏目2</div><div class="col-md-4 col-sm-6 col-12">栏目3</div></div></div>
</body>
</html>

原理：

col-md-4 代表 中等屏幕（≥768px）占 4 列，col-sm-6 代表 小屏幕（≥576px）占 6 列，col-12 代表 超小屏幕（<576px）占满 12 列。
通过 Bootstrap 的 栅格系统，可以自动调整列的排列方式，适应不同设备。

适用场景：

适用于 企业网站、后台管理系统，能够快速搭建自适应页面。

【CSS进阶】常见的页面自适应的方法

在前端开发中，自适应布局（Responsive Design）是一种让网页能够适应不同屏幕尺寸、设备和分辨率的技术。常见的自适应布局方法包括流式布局、弹性布局（Flexbox）、栅格布局（Grid）、媒体查询&…...

编程日记 2025/2/20 23:35:01

Linux系统配置阿里云yum源，安装docker

配置阿里云yum源需要保证能够访问阿里云网站可以先ping一下看看（阿里云可能禁ping，只要能够解析为正常的ip地址即可） ping mirrors.aliyun.com脚本 #!/bin/bash mkdir /etc/yum.repos.d/bak mv /etc/yum.repos.d/*.repo /etc/yum.repos…...

编程日记 2025/2/20 23:30:55

啥是CTF？新手如何入门CTF？网络安全零基础入门到精通实战教程！

CTF是啥 CTF 是 Capture The Flag 的简称，中文咱们叫夺旗赛，其本意是西方的一种传统运动。在比赛上两军会互相争夺旗帜，当有一方的旗帜已被敌军夺取，就代表了那一方的战败。在信息安全领域的 CTF 是说，通过各种攻击手…...

编程日记 2025/2/20 23:26:48

免费搭建个人网站

💡 全程零服务器、完全免费！我的个人站 guoshunfa.com ，正是基于此方案搭建，目前稳定运行。 ✅ vdoing不是基于最新的vuepress2，但是是我目前使用过最好用的主题，完全自动化，只需专心写博客。 …...

编程日记 2025/2/20 23:24:44

网络安全钓鱼邮件测试网络安全钓鱼

🍅 点击文末小卡片 ，免费获取网络安全全套资料，资料在手，涨薪更快如今，网络安全是一个备受关注的话题，“网络钓鱼”这个词也被广泛使用。即使您对病毒、恶意软件或如何在线保护自己一无所知，您…...

编程日记 2025/2/20 23:22:40

Rust编程语言入门教程（五）猜数游戏：生成、比较神秘数字并进行多次猜测

Rust 系列 🎀Rust编程语言入门教程（一）安装Rust🚪 🎀Rust编程语言入门教程（二）hello_world🚪 🎀Rust编程语言入门教程（三） Hello Cargo&#x1f…...

编程日记 2025/2/20 23:21:39

1.环境准备准备好下面四台台服务器： 主机名IP角色open-Euler1192.168.121.150mysql-server1openEuler-2192.168.121.151mysql-server2openEuler-3192.168.121.152clientRocky8-1192.168.121.160haproxy 2.mysql服务器配置 1.下载mariadb #下载mariadb [rootop…...

编程日记 2025/2/20 23:18:35

Windows桌面系统管理5：Windows 10操作系统注册表

Windows桌面系统管理0：总目录-CSDN博客 Windows桌面系统管理1：计算机硬件组成及组装-CSDN博客 Windows桌面系统管理2：VMware Workstation使用和管理-CSDN博客 Windows桌面系统管理3：Windows 10操作系统部署与使用-CSDN博客 Wi…...

编程日记 2025/2/20 23:17:33

CSDN文章质量分查询系统【赠python爬虫、提分攻略】

CSDN文章质量分查询系统 https://www.csdn.net/qc 点击链接-----> CSDN文章质量分查询系统 <------点击链接点击链接-----> https://www.csdn.net/qc <------点击链接点击链接-----> CSDN文章质量分查询系统 <------点击链接点击链…...

编程日记 2025/2/20 23:16:32

Mysql测试连接失败

解决方案 1 将mysql.exe(C:\Program Files\MySQL\MySQL Server 8.0\bin\mysql.exe)配置到系统环境变量 2 管理员权限启动cmd 输入 3 ALTER USER rootlocalhost IDENTIFIED WITH mysql_native_password BY 123456; 4 FLUSH PRIVILEGES;...

编程日记 2025/2/20 23:09:22

DeepSeek（AI）如何赋能智能漏洞扫描与利用的思考

当下，网络安全威胁持续演变，从简单恶意软件传播发展为结合人工智能、大数据分析的APT，对个人、企业及政府关键信息基础设施构成严重挑战。漏洞作为网络安全薄弱点，数量和种类随软件系统升级与网络架构复杂化急剧增加&#xff0c…...

编程日记 2025/2/20 23:07:17

Springboot使用Redis发布订阅自动更新缓存数据源

背景当项目有很多数据源的时候，通常会在启动的时候就把数据源连接加载缓存上，当数据源进行变更后如何自动实时将缓存的数据源进行更新呢？如果是单个项目直接调接口方法就行了，但是涉及到分布式多个系统呢？ 解决方案…...

编程日记 2025/2/20 23:04:13

rust学习六、简单的struct结构

一、结构定义 struct-翻译为结构/结构体总体上有两种定义方式：带有详细属性名的；不带属性名（元组） 从工程角度出发，并不推荐不带属性的定义方式，因为不友好。希望rust后面不要搞类似好像很友好&#xff…...

编程日记 2025/2/20 23:01:09

.NET周刊【2月第2期 2025-02-09】

国内文章开箱即用的.NET MAUI组件库 V-Control 发布了! https://www.cnblogs.com/jevonsflash/p/18701494 文章介绍了V-Control，一个适用于.NET MAUI的组件库。作者计划将其开源，强调.NET MAUI是生产力强的跨平台移动开发工具。V-Control提供多种组件…...

编程日记 2025/2/20 23:00:07

Linux的基础指令和环境部署，项目部署实战（下）

目录上一篇：Linxu的基础指令和环境部署，项目部署实战（上）-CSDN博客 1. 搭建Java部署环境 1.1 apt apt常用命令列出所有的软件包更新软件包数据库安装软件包移除软件包 1.2 JDK 1.2.1. 更新 1.2.2. 安装openjdk&am…...

编程日记 2025/2/20 22:58:03

【分布式理论15】分布式调度1：分布式资源调度的由来与过程

文章目录一、操作系统的资源调度：从单核到多核二、分布式系统的资源调度：从单台服务器到集群三、固定资源映射四、动态资源分配：灵活的任务-资源匹配五、资源调度过程：从申请到执行本文主要讨论主题： 从操作系统…...

编程日记 2025/2/20 22:56:00

Python常见面试题的详解12

1. hasattr ()、getattr ()、setattr () 函数是如何使用的？ 要点这三个函数用于对对象的属性进行检查、获取和设置操作，是 Python 中进行对象属性动态操作的重要工具。 hasattr()：用于检查对象是否具有指定属性或方法。 getattr()&#x…...

编程日记 2025/2/20 22:54:58

未来AI方向落地场景：小语言模型，super_private_agent

未来AI方向落地场景：小语言模型，super_private_agent 目录未来AI方向落地场景：小语言模型，super_private_agent小语言模型super - private - agent（注重隐私的智能代理）碳基生命和硅基生命交互界面面向agent的专用交互协议和数据接口从web平台经济到网络平台举例说明社交…...

编程日记 2025/2/20 22:52:55

使用 PyTorch 实现标准卷积神经网络（CNN）

卷积神经网络（CNN）是深度学习中的重要组成部分，广泛应用于图像处理、语音识别、视频分析等任务。在这篇博客中，我们将使用 PyTorch 实现一个标准的卷积神经网络（CNN），并介绍各个部分的作用。什…...

编程日记 2025/2/20 22:51:54

开题报告——基于Spring Boot的垃圾分类预约回收系统

关于本科毕业设计（论文）开题报告的规定为切实做好本科毕业设计（论文）的开题报告工作，保证论文质量，特作如下规定：一、开题报告是本科毕业设计（论文）的必经过程，所有本科生在写作毕业设计（论文）之前都必须作开题报告。二、开题报告主要检验学生对专业知识的驾驭能…...

编程日记 2025/2/20 22:49:48

Awoo Installer：让Switch游戏安装变得简单高效的3个关键决策

Awoo Installer：让Switch游戏安装变得简单高效的3个关键决策【免费下载链接】Awoo-Installer A No-Bullshit NSP, NSZ, XCI, and XCZ Installer for Nintendo Switch 项目地址: https://gitcode.com/gh_mirrors/aw/Awoo-Installer 还在为Switch游戏安装的繁…...

编程新知 2026/4/28 2:20:41

基于推理的RAG新范式：告别向量检索，实现精准文档分析

1. 项目概述：告别向量检索，迎接基于推理的RAG新范式如果你曾经尝试过用传统的向量检索增强生成（RAG）来处理一份上百页的财务年报、一份复杂的法律合同，或者一本厚重的技术手册，你很可能经历过那种挫败感&am…...

编程新知 2026/4/28 0:41:25

告别macOS视频预览困境：QuickLookVideo让Finder真正支持所有视频格式

告别macOS视频预览困境：QuickLookVideo让Finder真正支持所有视频格式【免费下载链接】QuickLookVideo This package allows macOS Finder to display thumbnails, static QuickLook previews, cover art and metadata for most types of video files. 项目地址: …...

编程新知 2026/4/28 0:17:22

ChartVerse：提升视觉语言模型图表推理能力的数据合成框架

1. 项目概述 ChartVerse是一个创新的框架，旨在解决视觉语言模型（VLMs）在图表推理任务中面临的核心挑战——高质量训练数据的稀缺性。当前开源社区面临的主要困境是：现有数据集要么过于简单重复，要么缺乏深度推理所需的…...

编程新知 2026/4/27 21:29:59

抖音批量下载完整指南：如何快速掌握高效下载技巧

抖音批量下载完整指南：如何快速掌握高效下载技巧【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support. 抖…...

编程新知 2026/4/27 21:13:30

不止 for-in 和 Object.keys：用 TS 4.1+ 的模板字面量类型玩转 Enum 遍历与生成

超越运行时遍历：用 TS 4.1 模板字面量类型重构 Enum 元编程当我们需要在 TypeScript 中处理枚举时，传统的 for-in 和 Object.keys 方法虽然实用，但它们在类型系统中留下的信息几乎为零。TypeScript 4.1 引入的模板字面量类型（Tem…...

编程新知 2026/4/27 20:23:29

Redis 发布订阅系统实践

Redis 发布订阅系统实践：构建高效实时消息通信 Redis作为高性能的内存数据库，其发布订阅（Pub/Sub）模式为实时消息通信提供了轻量级解决方案。无论是聊天应用、实时通知还是事件驱动架构，Redis Pub/Sub都能通过简单的命…...

编程新知 2026/4/27 20:06:13

终极HTML转Word指南：3分钟掌握html-to-docx实现完美文档转换 [特殊字符]✨

终极HTML转Word指南：3分钟掌握html-to-docx实现完美文档转换 📄✨ 【免费下载链接】html-to-docx HTML to DOCX converter 项目地址: https://gitcode.com/gh_mirrors/ht/html-to-docx 你是否曾经为网页内容复制到Word时格式错乱而烦恼&#xff1…...

编程新知 2026/4/27 18:56:40