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

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

news 来源：原创 2025/9/20 15:36:18

在前端开发中，自适应布局（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/9/20 15:36:18

Java编程语言：从基础到高级应用的全面探索

在当今的软件开发领域中，Java无疑是一种极为流行且强大的编程语言。自1995年由Sun Microsystems推出以来，Java凭借其跨平台性、面向对象特性和丰富的API库，迅速成为企业级应用开发的首选语言。本文将带您从Java的基础语法入手，逐步…...

编程日记 2025/9/11 1:00:40

计算机视觉：神经网络实战之手势识别(附代码)

第一章：计算机视觉中图像的基础认知第二章：计算机视觉：卷积神经网络(CNN)基本概念(一) 第三章：计算机视觉：卷积神经网络(CNN)基本概念(二) 第四章：搭建一个经典的LeNet5神经网络(附代码) 第五章&#xff1…...

编程日记 2025/9/19 12:29:10

linux 面试题

1. 文件与目录操作 ls 功能：列出目录内容常用参数： -l：长格式显示（权限、大小、时间等）-a：显示隐藏文件（以.开头的文件）-h：以易读格式显示文件大小（如KB/…...

编程日记 2025/9/15 3:09:41

利用websocket检测网络连接稳定性

浏览器中打开F12，控制台中输入以下内容 > 回车 > 等待结果连接关闭表示断网 let reconnectDelay 1000; // 初始重连间隔 let pingInterval null; let socketManuallyClosed false; // 标志是否手动关闭function createWebSocket() {if (socketManuallyCl…...

编程日记 2025/9/15 16:16:07

Go入门之数组与切片

var arr1 [...]int{1, 2, 3}fmt.Println(len(arr1)) 数组长度不能扩展 var arr2 [...]int{0: 100, 5: 101}fmt.Println(len(arr2)) } 指定索引初始化可以通过for和range遍历值类型:基本数据类型和数组都是值类型，改变副本的值不会改变本身的值切片为引用数…...

编程日记 2025/9/12 5:07:58

《Nuxt.js 实战：从放弃到入门》六、打造个性化文字转图片工具

在当今短视频的时代，将文字转化为图片是一个常见且实用的需求，无论是用于社交媒体分享、设计宣传材料，还是制作个性化的视觉内容。今天，我们就来深入剖析一个使用 Vue 3 和 ElementPlus 构建的文字转图片工具的代码&#xf…...

编程日记 2025/9/15 9:24:27

软硬链接？

目录 1. 硬链接（Hard Link） 2. 软链接（Symbolic Link，符号链接） 总结： 1. 硬链接（Hard Link） 定义： 硬链接是直接指向文件数据块（inode）的链接。…...

编程日记 2025/9/15 1:15:14

轻松搭建本地大语言模型（二）Open-WebUI安装与使用

文章目录前置条件目标一、安装 Open-WebUI使用 Docker 部署二、使用 Open-WebUI（一）访问Open-WebUI（二）注册账号（三）模型选择（四）交互四、常见问题（一）容器…...

编程日记 2025/9/11 14:57:08

windows Redis Insight 如何查看宝塔docker里的redis数据

1、ping 命令用于测试网络连通性，它只需要目标 IP 地址作为参数，不需要端口号。正确的命令如下： ping 公网地址2、使用 Telnet 测试端口连通性 telnet 公网地址端口 telnet 47.108.67.228 6379如果连接成功，窗口会变为空白&am…...

编程日记 2025/9/19 20:28:39

Python高级语法之urllib

目录： 1、爬虫的介绍2、urllib的使用2.1、urllib的异常捕获2.2、urllib的实现微博cookie登陆2.3、urllib的handler处理器2.4、urllib的代理服务器2.5、urllib的代理服务池 1、爬虫的介绍 2、urllib的使用 2.1、urllib的异常捕获 2.2、urllib的实现微博cookie登陆 2…...

编程日记 2025/9/15 7:06:37

word$deepseep

1、进入官网地址。 DeepSeek 2、进入DeepSeek的API文档 3、点击DeepSeek开放平台左侧的“API Keys”, 再点击“创建API Key” 4、在弹出的对话框中，输入自己的API Key名称，点击创建。 sk-0385cad5e19346a0a4ac8b7f0d7be428 5、打开Word文档。 6、Word找…...

编程日记 2025/9/19 17:19:46

【koa】05-koa+mysql实现数据库集成：连接和增删改查

前言前面我们已经介绍了第二阶段的第1-4点内容，本篇介绍第5点内容：数据库集成（koamysql） 也是第二阶段内容的完结。一、学习目标在koa项目中正常连接数据库，对数据表进行增删改查的操作。二、操作步骤本篇文章…...

编程日记 2025/9/11 0:20:39

【深度学习】分布偏移纠正

分布偏移纠正正如我们所讨论的，在许多情况下训练和测试分布 P ( x , y ) P(\mathbf{x}, y) P(x,y)是不同的。在一些情况下，我们很幸运，不管协变量、标签或概念如何发生偏移，模型都能正常工作。在另一些情况下，我们…...

编程日记 2025/9/18 19:46:13

数据结构_前言

本次我们将进入一个新的阶段啦~ 要注意哦： 在学数据结构之前，我们要先掌握c语言中所学的指针、结构体、内存的存储这几部分，如果还没太掌握的话，那记得去复习回顾一下噢。下面我们就一起进入数据结构的学习吧！ 知识…...

编程日记 2025/9/15 5:05:35

运行环境在这里插入代码片 [roothadoop000 conf]# java -version java version "1.8.0_144" Java(TM) SE Runtime Environment (build 1.8.0_144-b01)[roothadoop000 conf]# echo $JAVA_HOME /home/hadoop/app/jdk1.8.0_144[roothadoop000 conf]# vi spark-env.sh …...

编程日记 2025/9/19 13:39:22

由because it is a JDK dynamic proxy that implements温习Spring的代理

由because it is a JDK dynamic proxy that implements温习Spring的代理项目场景原因分析1、报错位置2、错误原因3、业务需求解决方案1、注入CGlib代理2、取出原生对象项目场景昨日在启动一个SpringBoot项目时，发现启动失败，并在日志中出现了这样的…...

编程日记 2025/9/16 1:38:53

mac相关命令

显示和隐藏usr等隐藏文件文件 terminal输入: defaults write com.apple.Finder AppleShowAllFiles YESdefaults write com.apple.Finder AppleShowAllFiles NO让.bashrc每次启动shell自动生效编辑vim ~/.bash_profile 文件, 加上 if [ -f ~/.bashrc ]; then. ~/.bashrc fi注…...

编程日记 2025/9/13 8:04:20

Banana Pi OpenWRT One 官方路由器的第一印象

OpenWRT One是OpenWRT开源社区推出的首款官方开发板，与Banana Pi社区共同设计，由Banana Pi制造和发行。路由器采用蓝色铝合金外壳，质感极佳，视觉效果远超宣传图。整体设计简洁，呈长方形，虽然不是特别时尚&a…...

编程日记 2025/9/15 20:13:03

基于SpringBoot的“高考志愿智能推荐系统”的设计与实现（源码+数据库+文档+PPT)

基于SpringBoot的“高考志愿智能推荐系统”的设计与实现（源码数据库文档PPT) 开发语言：Java 数据库：MySQL 技术：SpringBoot 工具：IDEA/Ecilpse、Navicat、Maven 系统展示系统总体结构图系统首页界面系统注册页…...

编程日记 2025/9/8 10:41:22

探索Hugging Face：开源AI社区的核心工具与应用实践

引言：AI民主化的先锋在自然语言处理（NLP）领域，Hugging Face已成为开源社区的代名词。这个成立于2016年的平台，通过提供易用的工具和丰富的预训练模型库，彻底改变了开发者使用和部署AI模型的方式。截至202…...

编程日记 2025/9/19 9:46:26

SVM对偶问题

1、对偶问题数学基础对偶问题：在线性规划中，每一个线性规划问题(称为原问题)都有一个与之对应的对偶问题。从数学形式上看，如果原问题是求解一个线性目标函数的最大值（或最小值），在满足一系列线性不等式&…...

编程日记 2025/9/20 15:16:30

萃取的实现（三）

探测成员基于SFINAE，判断一个给定类型T，是否含有名为x的成员。探测类型成员判断一个给定类型T，是否含有类型成员size_type，源码如下： #include <type_traits> #include <iostream> #include <vect…...

编程日记 2025/9/11 19:55:29

nodejs版本管理，使用 nvm 删除node版本，要删除 Node.js 的某个版本详细操作

要删除 Node.js 的某个版本并保持 Node Version Manager (nvm) 的管理整洁，可以按以下步骤操作： 步骤 1：查看已安装的 Node.js 版本 nvm ls这会列出你通过 nvm 安装的所有 Node.js 版本。输出类似于： -> v18.17.1v16.20…...

编程日记 2025/9/12 13:00:24

openCV中如何实现滤波

图像滤波用于去除噪声和图像平滑，OpenCV 提供了多种滤波器： 1.1. 均值滤波： import cv2# 读取图像 image cv2.imread("example.jpg")# 均值滤波 blurred_image cv2.blur(image, (5, 5)) # (5, 5) 是滤波核的大小滤波核大小的…...

编程日记 2025/9/19 9:39:48

vscode通过ssh连接服务器实现免密登录+删除

文章目录参考： 1、 vscode通过ssh连接服务器实现免密登录删除（吐血总结）...

编程日记 2025/9/17 9:08:54

智能硬件新时代，EasyRTC开启物联音视频新纪元

在万物互联的时代浪潮中，智能硬件正以前所未有的速度融入我们的生活，从智能家居的便捷控制，到智能穿戴设备的健康监测，再到工业物联网的高效管理，智能硬件的应用场景不断拓展。而在这个智能硬件蓬勃发展的背后&#xf…...

编程日记 2025/9/17 19:22:53

《机器学习数学基础》补充资料：求解线性方程组的克拉默法则

《机器学习数学基础》中并没有将解线性方程组作为重点，只是在第2章2.4.2节做了比较完整的概述。这是因为，如果用程序求解线性方程组，相对于高等数学教材中强调的手工求解，要简单得多了。本文是关于线性方程组的拓展，供…...

编程日记 2025/9/14 6:34:30

mysql的rpm包安装

(如果之前下载过mariadb，使用yum remove mariadb卸载，因为mariadb与rpm包安装的mysql有很多相似的组件和文件，会发生冲突，而源码包安装的mysql不会，所以不用删除源码包安装myqsl，只删除mariadb就可以&#…...

编程日记 2025/9/18 20:04:54

TailwindCss的vue3安装使用

按照官网的安装教程，属性最后无法生效，这是自我改良版，添加了额外步骤，但是每次引入新的tailwindcss属性需要重新跑一次项目 npm下载tailwindcss npm install -D tailwindcss npx初始化tailwind配置 npx tailwindcss init 此时根…...

编程日记 2025/9/20 5:55:13

foobar2000设置DSP使用教程及软件推荐

foobar2000安卓中文版：一款高品质手机音频播放器 foobar2000安卓中文版是一款备受好评的高品质手机音频播放器。几乎支持所有的音频格式，包括 MP3、MP4、AAC、CD 音频等。不论是经典老歌还是最新的流行音乐，foobar2000都能完美播放。除此之…...

编程日记 2025/9/9 21:49:15

开源多商户商城源码最新版_适配微信小程序+H5+APP+PC多端

在数字化时代，电子商务已经成为各行业不可或缺的一部分，开源多商户商城源码为中小企业和个人开发者提供了快速搭建和定制电商平台的利器。分享一款最新版的开源多商户商城源码，它能够适配微信小程序、H5、APP和PC等多个端口，满足商…...

编程日记 2025/9/10 16:41:19

【matlab】大小键盘对应的Kbname

matlab中可以通过Kbname来识别键盘上的键。在写范式的时候，遇到一个问题，我想用大键盘上排成一行的数字按键评分，比如 Kbname(1) 表示键盘上的数字1，但是这种写法只能识别小键盘上的数字，无法达到我的目的，…...

编程日记 2025/9/15 21:53:21

go语言并发的最佳实践

Go 语言的并发模型是其最强大的特性之一，基于 CSP（Communicating Sequential Processes）理论，通过 goroutine 和 channel 实现轻量级并发. 一、并发核心概念 1. Goroutine 在 Go 语言中，Goroutine 是实现并发编程的…...

编程日记 2025/9/10 19:44:29

超全Deepseek资料包，deepseek下载安装部署提示词及本地部署指南介绍

该资料包涵盖了DeepSeek模型的下载、安装、部署以及本地运行的详细指南，适合希望在本地环境中高效运行DeepSeek模型的用户。资料包不仅包括基础的安装步骤，还提供了68G多套独立部署视频教程教程，针对不同硬件配置的模型选择建议，以…...

编程日记 2025/9/9 13:27:00

重看Spring聚焦BeanDefinition分析和构造

目录一、对BeanDefinition的理解 （一）理解元信息 （二）BeanDefinition理解分析二、BeanDefinition的结构设计分析 （一）整体结构体会 （二）重要接口和类分析三、构造 BeanDef…...

编程日记 2025/9/19 10:41:25

从MySQL5.7平滑升级到MySQL8.0的最佳实践分享

一、前言升级需求：将5.7.35升级到8.0.27, 升级方式 in-place升级【关闭现有版本MySQL，将二进制或包替换成新版本并在现有数据目录上启动MySQL并执行升级任务的方式，称为in-place升级】原版本 5.7.35 CentOS Linux release 7.9.2009 新版本…...

编程日记 2025/9/17 10:16:01

Node-Red

是什么？ ——基于浏览器的流程编辑工具可连接设备、服务器和API应用一、安装 1、本地安装（Windows）在电脑上安装 Node.js 环境，然后使用 NPM 安装 Node-RED Node.js介绍： JavaScript 在不同的位置有不一样的解析器写入 HTML 的 JS 语言，浏览器即它的解析器需要独…...

编程日记 2025/9/19 13:15:15

GO语言的安装以及第一个Go语言程序

1. Go语言的安装与设置官网:golang.org 国内下载:https://studygolang.com/dl 国内镜像:https://goproxy.cn/ 2. GOland的安装 Go 1.13 及以上（推荐） 打开你的终端并执行 $ go env -w GO111MODULEon $ go env -w GOPROXYhttps://goproxy.cn,direc…...

编程日记 2025/9/10 10:50:56

年前集训总结python

1.用空格隔开输出列表list1 print(" ".jion(map(str,list1))) 2.转换函数 int() 将一个数字或字符串转换为整数。可以指定基数，支持从其他进制（如二进制、十六进制）转换为十进制。 int(101, 2) # 二进制字符串转十进制 > 5 …...

编程日记 2025/9/7 16:02:20

【JAVA实战】JAVA实现Excel模板下载并填充模板下拉选项数据

背景有这样一个场景：前端下载Excel模板，进行数据导入，这个下载模板过程需要经过后端接口去数据库查询数据进行某些列的下拉数据填充，下拉填充的数据过程中会出现错误String literals in formulas can’t be bigger than 255 cha…...

编程日记 2025/9/19 11:38:17

【linux】在 Linux 上部署 DeepSeek-r1:32/70b：解决下载中断问题

【linux】在 Linux 上部署 DeepSeek-r1:32/70b：解决下载中断问题【承接商业广告，如需商业合作请+v17740568442】文章目录【linux】在 Linux 上部署 DeepSeek-r1:32/70b：解决下载中断问题问题描述：解决方法方法一：手动中断并重启下载方法二：使用 Bash 脚本自动化下载在…...

编程日记 2025/9/10 10:20:47

Rust 面试题

1. Rust 中的所有权（Ownership）是什么？回答：所有权是 Rust 的核心概念之一，每个值在 Rust 中都有一个唯一的所有者，并且所有权在作用域内转移。当所有者离开作用域时，Rust 会自动释放该值的内存，避免了内存泄漏。代码示例： fn main() {let s1 = String::from(&q…...

编程日记 2025/9/19 18:46:34

Copilot Next Edit Suggestions（预览版）

作者：Brigit Murtaugh，Burke Holland 排版：Alan Wang 我们很高兴向你介绍在本次 Visual Studio Code 发布中，关于 GitHub Copilot 的三个预览功能： Next Edit Suggestions（NES）Copilot Edits 的…...

编程日记 2025/9/18 11:37:54

LeetCode - 18 四数之和

题目来源 18. 四数之和 - 力扣（LeetCode） 题目描述给你一个由 n 个整数组成的数组 nums ，和一个目标值 target 。请你找出并返回满足下述全部条件且不重复的四元组 [nums[a], nums[b], nums[c], nums[d]] （若两个四元组元素一一…...

编程日记 2025/9/19 9:36:50

汽车零部件开发应该具备哪些编程思维？

目录 1、功能安全思维 2、实时性与确定性思维 3、可靠性和冗余思维 4、硬件软件协同思维 5、CAN总线通信思维 6、故障诊断和自诊断思维 7、功耗优化思维 8、软件更新和版本管理思维 9、用户体验与安全性思维汽车零部件开发中，嵌入式软件在车辆系统中的作用…...

编程日记 2025/9/14 22:52:49

在Windows系统中安装Open WebUI并连接Ollama

Open WebUI是一个开源的大语言模型（LLM）交互界面，支持本地部署与离线运行。通过它，用户可以在类似ChatGPT的网页界面中，直接操作本地运行的Ollama等大语言模型工具。安装前的核心要求： Python 3.11&#…...

编程日记 2025/9/15 6:32:59

React 与 Vue 对比指南 - 上

React 与 Vue 对比指南 - 上本文将展示如何在 React 和 Vue 中实现常见功能，从基础渲染到高级状态管理 Hello 分别使用 react 和 vue 写一个 Hello World！ react export default () > {return <div>Hello World!</div>; }vue <…...

编程日记 2025/9/20 10:33:53