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

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

news 2025/11/29 0:25:55

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

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/11/27 14:03:53

（二）TensorRT-LLM | 模型导出（v0.20.0rc3）

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

编程新知 2025/11/25 5:06:44

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2025/11/16 21:56:06

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

编程新知 2025/11/25 8:55:10

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

编程新知 2025/9/3 5:42:53

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分，它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构： use strict;/…...

编程新知 2025/10/31 21:11:39

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

编程新知 2025/11/28 2:05:23

git: early EOF

macOS报错&#xff1a; Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...

编程新知 2025/10/12 2:03:36

API网关Kong的鉴权与限流：高并发场景下的核心实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中&#xff0c;API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关&#xff0c;Kong凭借其插件化架构…...

编程新知 2025/9/6 9:35:29

Windows 下端口占用排查与释放全攻略

Windows 下端口占用排查与释放全攻略​ 在开发和运维过程中&#xff0c;经常会遇到端口被占用的问题&#xff08;如 8080、3306 等常用端口&#xff09;。本文将详细介绍如何通过命令行和图形化界面快速定位并释放被占用的端口&#xff0c;帮助你高效解决此类问题。​ 一、准…...

编程新知 2025/10/5 19:22:12