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

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

news 2026/2/10 22:53:13

在前端开发中，自适应布局（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进阶】常见的页面自适应的方法

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

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

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

配置阿里云yum源 需要保证能够访问阿里云网站 可以先ping一下看看&#xff08;阿里云可能禁ping&#xff0c;只要能够解析为正常的ip地址即可&#xff09; 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 的简称&#xff0c;中文咱们叫夺旗赛&#xff0c;其本意是西方的一种传统运动。在比赛上两军会互相争夺旗帜&#xff0c;当有一方的旗帜已被敌军夺取&#xff0c;就代表了那一方的战败。在信息安全领域的 CTF 是说&#xff0c;通过各种攻击手…...

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

免费搭建个人网站

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

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

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

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

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

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

Rust 系列 &#x1f380;Rust编程语言入门教程&#xff08;一&#xff09;安装Rust&#x1f6aa; &#x1f380;Rust编程语言入门教程&#xff08;二&#xff09;hello_world&#x1f6aa; &#x1f380;Rust编程语言入门教程&#xff08;三&#xff09; Hello Cargo&#x1f…...

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

haproxy实现MySQL服务器负载均衡

1.环境准备 准备好下面四台台服务器&#xff1a; 主机名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&#xff1a;总目录-CSDN博客 Windows桌面系统管理1&#xff1a;计算机硬件组成及组装-CSDN博客 Windows桌面系统管理2&#xff1a;VMware Workstation使用和管理-CSDN博客 Windows桌面系统管理3&#xff1a;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）如何赋能智能漏洞扫描与利用的思考

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

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

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

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

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

rust学习六、简单的struct结构

一、结构定义 struct-翻译为结构/结构体 总体上有两种定义方式&#xff1a;带有详细属性名的&#xff1b;不带属性名&#xff08;元组&#xff09; 从工程角度出发&#xff0c;并不推荐不带属性的定义方式&#xff0c;因为不友好。希望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&#xff0c;一个适用于.NET MAUI的组件库。作者计划将其开源&#xff0c;强调.NET MAUI是生产力强的跨平台移动开发工具。V-Control提供多种组件…...

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

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

目录 上一篇&#xff1a;Linxu的基础指令和环境部署&#xff0c;项目部署实战&#xff08;上&#xff09;-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：分布式资源调度的由来与过程

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

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

Python常见面试题的详解12

1. hasattr ()、getattr ()、setattr () 函数是如何使用的&#xff1f; 要点 这三个函数用于对对象的属性进行检查、获取和设置操作&#xff0c;是 Python 中进行对象属性动态操作的重要工具。 hasattr()&#xff1a;用于检查对象是否具有指定属性或方法。 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）

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

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

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

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

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

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2026/2/8 20:42:41

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/12/14 14:47:02

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

编程新知 2025/10/6 18:46:56

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2026/2/8 5:28:24

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

编程新知 2025/6/11 3:20:47

MySQL 知识小结（一）

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

编程新知 2026/1/26 13:29:47

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

编程新知 2026/1/30 4:58:21

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

编程新知 2026/1/31 13:04:44

Caliper 配置文件解析：fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件，通常包含以下内容： test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

编程新知 2025/10/24 15:14:02

rm视觉学习1-自瞄部分

首先先感谢中南大学的开源&#xff0c;提供了很全面的思路&#xff0c;减少了很多基础性的开发研究 我看的阅读的是中南大学FYT战队开源视觉代码 链接&#xff1a;https://github.com/CSU-FYT-Vision/FYT2024_vision.git 1.框架&#xff1a; 代码框架结构&#xff1a;readme有…...

编程新知 2026/2/7 21:45:37