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

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

news 2026/2/11 0:43:30

在前端开发中，自适应布局（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

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2026/1/30 17:10:19

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2026/1/31 9:33:18

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

编程新知 2026/2/10 13:33:36

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...

编程新知 2026/2/9 9:22:40

LangChain 中的文档加载器（Loader）与文本切分器（Splitter）详解《二》

&#x1f9e0; LangChain 中 TextSplitter 的使用详解&#xff1a;从基础到进阶&#xff08;附代码&#xff09; 一、前言 在处理大规模文本数据时&#xff0c;特别是在构建知识库或进行大模型训练与推理时&#xff0c;文本切分&#xff08;Text Splitting&#xff09; 是一个…...

编程新知 2025/10/10 9:24:44

一些实用的chrome扩展0x01

简介 浏览器扩展程序有助于自动化任务、查找隐藏的漏洞、隐藏自身痕迹。以下列出了一些必备扩展程序&#xff0c;无论是测试应用程序、搜寻漏洞还是收集情报&#xff0c;它们都能提升工作流程。 FoxyProxy 代理管理工具&#xff0c;此扩展简化了使用代理&#xff08;如 Burp…...

编程新知 2026/2/4 17:28:54

【免费数据】2005-2019年我国272个地级市的旅游竞争力多指标数据（33个指标）

旅游业是一个城市的重要产业构成。旅游竞争力是一个城市竞争力的重要构成部分。一个城市的旅游竞争力反映了其在旅游市场竞争中的比较优势。 今日我们分享的是2005-2019年我国272个地级市的旅游竞争力多指标数据&#xff01;该数据集源自2025年4月发表于《地理学报》的论文成果…...

编程新知 2026/2/10 6:46:41

【记录坑点问题】IDEA运行：maven-resources-production:XX: OOM: Java heap space

问题&#xff1a;IDEA出现maven-resources-production:operation-service: java.lang.OutOfMemoryError: Java heap space 解决方案&#xff1a;将编译的堆内存增加一点 位置&#xff1a;设置setting-》构建菜单build-》编译器Complier...

编程新知 2026/1/26 19:41:09

python打卡day49@浙大疏锦行

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 一、通道注意力模块复习 & CBAM实现 import torch import torch.nn as nnclass CBAM(nn.Module):def __init__…...

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

npm安装electron下载太慢，导致报错

npm安装electron下载太慢&#xff0c;导致报错 背景 想学习electron框架做个桌面应用&#xff0c;卡在了安装依赖&#xff08;无语了&#xff09;。。。一开始以为node版本或者npm版本太低问题&#xff0c;调整版本后还是报错。偶尔执行install命令后&#xff0c;可以开始下载…...

编程新知 2026/2/5 8:04:32