【CSS进阶】常见的页面自适应的方法
在前端开发中,自适应布局(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)、媒体查询&…...
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…...
啥是CTF?新手如何入门CTF?网络安全零基础入门到精通实战教程!
CTF是啥 CTF 是 Capture The Flag 的简称,中文咱们叫夺旗赛,其本意是西方的一种传统运动。在比赛上两军会互相争夺旗帜,当有一方的旗帜已被敌军夺取,就代表了那一方的战败。在信息安全领域的 CTF 是说,通过各种攻击手…...
免费搭建个人网站
💡 全程零服务器、完全免费!我的个人站 guoshunfa.com ,正是基于此方案搭建,目前稳定运行。 ✅ vdoing不是基于最新的vuepress2,但是是我目前使用过最好用的主题,完全自动化,只需专心写博客。 …...
网络安全钓鱼邮件测试 网络安全 钓鱼
🍅 点击文末小卡片 ,免费获取网络安全全套资料,资料在手,涨薪更快 如今,网络安全是一个备受关注的话题,“网络钓鱼”这个词也被广泛使用。 即使您对病毒、恶意软件或如何在线保护自己一无所知,您…...
Rust编程语言入门教程(五)猜数游戏:生成、比较神秘数字并进行多次猜测
Rust 系列 🎀Rust编程语言入门教程(一)安装Rust🚪 🎀Rust编程语言入门教程(二)hello_world🚪 🎀Rust编程语言入门教程(三) Hello Cargo…...
haproxy实现MySQL服务器负载均衡
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…...
Windows桌面系统管理5:Windows 10操作系统注册表
Windows桌面系统管理0:总目录-CSDN博客 Windows桌面系统管理1:计算机硬件组成及组装-CSDN博客 Windows桌面系统管理2:VMware Workstation使用和管理-CSDN博客 Windows桌面系统管理3:Windows 10操作系统部署与使用-CSDN博客 Wi…...
CSDN文章质量分查询系统【赠python爬虫、提分攻略】
CSDN文章质量分查询系统 https://www.csdn.net/qc 点击链接-----> CSDN文章质量分查询系统 <------点击链接 点击链接-----> https://www.csdn.net/qc <------点击链接 点击链接-----> CSDN文章质量分查询系统 <------点击链接 点击链…...
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;...
DeepSeek(AI)如何赋能智能漏洞扫描与利用的思考
当下,网络安全威胁持续演变,从简单恶意软件传播发展为结合人工智能、大数据分析的APT,对个人、企业及政府关键信息基础设施构成严重挑战。 漏洞作为网络安全薄弱点,数量和种类随软件系统升级与网络架构复杂化急剧增加,…...
Springboot使用Redis发布订阅自动更新缓存数据源
背景 当项目有很多数据源的时候,通常会在启动的时候就把数据源连接加载缓存上,当数据源进行变更后如何自动实时将缓存的数据源进行更新呢?如果是单个项目直接调接口方法就行了,但是涉及到分布式多个系统呢? 解决方案…...
rust学习六、简单的struct结构
一、结构定义 struct-翻译为结构/结构体 总体上有两种定义方式:带有详细属性名的;不带属性名(元组) 从工程角度出发,并不推荐不带属性的定义方式,因为不友好。希望rust后面不要搞类似好像很友好ÿ…...
.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提供多种组件…...
Linux的基础指令和环境部署,项目部署实战(下)
目录 上一篇:Linxu的基础指令和环境部署,项目部署实战(上)-CSDN博客 1. 搭建Java部署环境 1.1 apt apt常用命令 列出所有的软件包 更新软件包数据库 安装软件包 移除软件包 1.2 JDK 1.2.1. 更新 1.2.2. 安装openjdk&am…...
【分布式理论15】分布式调度1:分布式资源调度的由来与过程
文章目录 一、操作系统的资源调度:从单核到多核二、 分布式系统的资源调度:从单台服务器到集群三、 固定资源映射四、 动态资源分配:灵活的任务-资源匹配五、 资源调度过程:从申请到执行 本文主要讨论主题: 从操作系统…...
Python常见面试题的详解12
1. hasattr ()、getattr ()、setattr () 函数是如何使用的? 要点 这三个函数用于对对象的属性进行检查、获取和设置操作,是 Python 中进行对象属性动态操作的重要工具。 hasattr():用于检查对象是否具有指定属性或方法。 getattr()&#x…...
未来AI方向落地场景:小语言模型,super_private_agent
未来AI方向落地场景:小语言模型,super_private_agent 目录 未来AI方向落地场景:小语言模型,super_private_agent小语言模型super - private - agent(注重隐私的智能代理)碳基生命和硅基生命交互界面面向agent的专用交互协议和数据接口从web平台经济到网络平台举例说明社交…...
使用 PyTorch 实现标准卷积神经网络(CNN)
卷积神经网络(CNN)是深度学习中的重要组成部分,广泛应用于图像处理、语音识别、视频分析等任务。在这篇博客中,我们将使用 PyTorch 实现一个标准的卷积神经网络(CNN),并介绍各个部分的作用。 什…...
开题报告——基于Spring Boot的垃圾分类预约回收系统
关于本科毕业设计(论文)开题报告的规定 为切实做好本科毕业设计(论文)的开题报告工作,保证论文质量,特作如下规定: 一、开题报告是本科毕业设计(论文)的必经过程,所有本科生在写作毕业设计(论文)之前都必须作开题报告。 二、开题报告主要检验学生对专业知识的驾驭能…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式,可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录
ASP.NET Core 是一个跨平台的开源框架,用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录,以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎(Physics Engine) 物理引擎 是一种通过计算机模拟物理规律(如力学、碰撞、重力、流体动力学等)的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互,广泛应用于 游戏开发、动画制作、虚…...
逻辑回归:给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告(肿瘤大小、血液指标),你需要做出一个**决定性判断**:恶性还是良性?这种“非黑即白”的抉择,正是**逻辑回归(Logistic Regression)** 的战场&a…...
IGP(Interior Gateway Protocol,内部网关协议)
IGP(Interior Gateway Protocol,内部网关协议) 是一种用于在一个自治系统(AS)内部传递路由信息的路由协议,主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强,React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 (1)使用React Native…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下,江苏艾立泰以一场跨国资源接力的创新实践,重新定义了绿色供应链的边界。 跨国回收网络:废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点,将海外废弃包装箱通过标准…...
ffmpeg(四):滤镜命令
FFmpeg 的滤镜命令是用于音视频处理中的强大工具,可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下: ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜: ffmpeg…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行,YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID: YW3…...
