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

前端响应式布局

news 2026/3/27 9:51:19

1.什么是响应式布局？

响应式布局是一种使网页在不同设备（如手机、平板和桌面）上均能良好显示的设计理念。

2.响应式布局的原理？

通过灵活的网格布局、CSS 媒体查询和弹性单位等技术，实现内容自适应屏幕尺寸变化。

3.响应式布局的体现？

响应式布局通常使用网格系统来控制页面的结构。可以使用 CSS 的 flexbox 或 CSS Grid 来创建灵活的布局。

3.1. flexbox布局

Flexbox 是一种一维布局模型，适用于单行或单列的布局。代码示例如下：

<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div>
</div>

.container {display: flex;            /* 使用 Flexbox 布局 */flex-wrap: wrap;         /* 允许换行 */justify-content: space-around; /* 项目均匀分布 */
}.item {flex: 1 1 200px;         /* 使每个项目至少 200px 宽，并可以增长 */margin: 10px;           /* 每个项目之间的间距 */background-color: #f2f2f2; /* 背景色 */text-align: center;      /* 文本居中 */padding: 20px;           /* 内边距 */
}

3.2. CSS Grid布局

CSS Grid 是一种二维布局模型，更适合复杂的布局。示例代码如下：

<div class="grid-container"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div>
</div>

.grid-container {display: grid;                  /* 使用 Grid 布局 */grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 自动填充列 */gap: 10px;                      /* 网格间隙 */
}.grid-item {background-color: #f2f2f2;     /* 背景色 */text-align: center;             /* 文本居中 */padding: 20px;                  /* 内边距 */
}

3.3. 媒体查询（响应式布局的核心）

媒体查询是响应式设计的核心，允许开发者根据不同的屏幕特性（如宽度、高度、方向等）应用不同的样式。示例代码如下:

@media (max-width: 768px) {.item {flex: 1 1 100%;             /* 小于 768px 时，每个项目占满整行 */}
}@media (max-width: 480px) {.item {font-size: 14px;           /* 小于 480px 时，字体变小 */}
}

3.4. 弹性单位

使用相对单位（如 %、em、rem、vh、vw 等）可以使布局更灵活。

  • 百分比 (%)：根据父元素的宽度或高度计算。
  • em 和 rem：相对于字体大小，em 是相对于父元素的字体大小，rem 是相对于根元素（通常是 <html>）的字体大小。
  • vh 和 vw：相对于视口的高度和宽度，1vh 是视口高度的 1%，1vw 是视口宽度的 1%。

代码示例如下：

.container {width: 80%;                   /* 容器宽度为视口宽度的 80% */padding: 2rem;               /* 内边距为根元素字体大小的 2 倍 */
}.item {height: 20vh;                /* 项目高度为视口高度的 20% */
}

3.5. 响应式图片和媒体

为了确保图片和视频等媒体在不同屏幕尺寸上适应，可以使用 CSS 的 max-width 属性。代码示例如下：

img {max-width: 100%;             /* 图片最大宽度为其父元素的 100% */height: auto;                /* 高度自动调整 */
}

除此以外还可以使用img标签的srcset属性。它允许为<img>标签指定多个源图像，并根据设备屏幕的大小和分辨率来选择最合适的图像。代码示例如下：

<img src="small.jpg"srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"sizes="(max-width: 600px) 500px, (max-width: 900px) 1000px, 1500px"alt="示例图像"
>

一般情况下，scset和sizes属性一起使用，因为sizes可以帮助浏览器更准确地知道在不同视图下应该显示多大的图像，这样浏览器在选择图像时就更加精准了。

srcset：列出了三个图像源和它们各自的宽度描述符。500w、1000w和1500w告诉浏览器每个图像的自然宽度。

sizes：

  • 当视口宽度最大为600px时，图像的显示大小应为500px宽。
  • 当视口宽度最大为900px时，图像的显示大小应为1000px宽。
  • 如果视口宽度超过900px时，图像的显示大小应为1500px宽。
     

相关文章：

前端响应式布局

1.什么是响应式布局&#xff1f; 响应式布局是一种使网页在不同设备&#xff08;如手机、平板和桌面&#xff09;上均能良好显示的设计理念。 2.响应式布局的原理&#xff1f; 通过灵活的网格布局、CSS 媒体查询和弹性单位等技术&#xff0c;实现内容自适应屏幕尺寸变化。 3.响…...

编程日记 2024/10/16 14:01:11

力扣MySQL 1581

先把两张表连接&#xff0c;amount为null 的正是我们需要的&#xff0c;再按customer_id聚合 select Visits.visit_id,customer_id ,Transactions.visit_id ,transaction_id ,amount from Visits left join Transactions on Visits.visit_idTransactions.visit_id 正确代码&…...

编程日记 2024/10/16 14:00:10

就是这个样的粗爆，手搓一个计算器：科学计算器

作为程序员&#xff0c;没有合适的工具&#xff0c;就得手搓一个&#xff0c;PC端&#xff0c;移动端均可适用。废话不多说&#xff0c;直接上代码。 HTML: <div class"calculator"><div class"display-wrapper"><div class"display…...

编程日记 2024/10/16 13:59:09

wordpress使用popup弹窗插件的对比

您在寻找最好的 WordPress 弹出插件吗&#xff1f;大多数网站利用某种形状或形式的弹出窗口来将访问者指向他们希望他们去的地方。例如&#xff0c;这可能用于结帐、电子邮件订阅或用于生成潜在客户。 表现 弹出插件会减慢您的网站速度。当插件使用 WordPress 跟踪弹出窗口的…...

编程日记 2024/10/16 13:57:04

开源OpenStack

1.查询HCS基于OpenStack哪个版本开发 2.九大核心组件 OpenStack可以对接FC也可以对接KVM主机&#xff1b;&#xff08;OpenStack 对接华为FusionCompute&#xff0c;一个集群对应 openstack 一台计算主机&#xff09;-引申出nova compute 2.1nova nova两个核心组件nova contro…...

编程日记 2024/10/16 13:51:59

基于Spring Boot+vue技术的导游系统设计与实现

论文下载【免费】基于SpringBootvue技术的导游系统设计与实现资源-CSDN文库 摘 要 本研究背景主要聚焦于当前旅游业信息化、智能化的发展趋势。随着移动互联网的普及和人们出行方式的多样化&#xff0c;导游系统作为旅游服务的重要组成部分&#xff0c;亟需进行技术革新以提…...

编程日记 2024/10/16 13:50:58

软件测试 —— 灰度测试及测试流程！

软件测试中的灰度测试是一种结合了黑盒测试和白盒测试特点的测试方法&#xff0c;旨在通过逐步扩大测试范围来评估新系统或新功能在真实环境中的性能和稳定性。灰度测试是软件开发过程中的一个重要环节&#xff0c;它有助于在全面发布前发现并修复潜在问题&#xff0c;同时收集…...

编程日记 2024/10/16 13:48:55

中科星图GVE（案例）——AI实现光伏面板提取

目录 简介 函数 gve.Services.AI.solarExtraction(image) 代码 结果 知识星球 机器学习 简介 光伏面板提取是一种将光伏面板从图像或视频中准确地分割出来的任务&#xff0c;可以通过使用深度学习算法来实现。 以下是一种基于深度学习的光伏面板提取的实现步骤&#x…...

编程日记 2024/10/16 13:47:54

一种压缩QRCode矩阵以用于存储的方法

通常QRCode由服务器生成&#xff0c;以图片格式发送到客户端&#xff0c;由客户端直接展示&#xff0c;也可以由客户端使用javascript或其他内置的SDK直接生成。 0、需求 QRCode生成过程中往往是先生成矩阵&#xff0c;然后使用矩阵生成图片&#xff0c;矩阵就是由01组成的一…...

编程日记 2024/10/16 13:45:52

鸿蒙HarmonyOS开发：系统服务

拨打电话 call.makeCall 跳转到拨号界面&#xff0c;并显示待拨出的号码。使用callback异步回调。 makeCall(phoneNumber: string, callback: AsyncCallback<void>): voidimport { call } from kit.TelephonyKit;import { BusinessError } from kit.BasicServicesKit;c…...

编程日记 2024/10/16 13:44:48

【Go】GO语言知识总结浅析

Go语言是一种现代化的编程语言&#xff0c;由Google于2007年设计并于2009年发布。它旨在使编程变得简单、高效&#xff0c;并且可以在多核处理器上轻松构建高性能应用。Go语言的编程思想、发展历史、版本特点、运行原理、数据类型、应用场景&#xff0c;以及在web开发、网络编程…...

编程日记 2024/10/16 13:43:46

GWO-Transformer-LSTM灰狼算法优化深度学习多变量回归预测（Maltab）

GWO-Transformer-LSTM灰狼算法优化深度学习多变量回归预测&#xff08;Maltab&#xff09; 目录 GWO-Transformer-LSTM灰狼算法优化深度学习多变量回归预测&#xff08;Maltab&#xff09;效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现灰狼算法OOA-Transf…...

编程日记 2024/10/16 13:40:40

上市公司企业供应链抵抗力数据集（2012-2023年）

一、测算方式&#xff1a;参考《财经研究》张树山&#xff08;2024&#xff09;老师的做法&#xff0c;供应链抵抗力&#xff08;Resis&#xff09;体现了供应链运行状态的稳定性&#xff0c;即在应对外部扰动时&#xff0c;供应链仍能维持循环畅通。本文从稳固供应链关系来筛选…...

编程日记 2024/10/16 13:39:39

javaWeb项目-ssm+jsp-XX牙科诊所管理系统功能介绍

本项目源码&#xff08;点击下方链接下载&#xff09;&#xff1a;java-ssmjsp私人牙科诊所管理系统实现源码(项目源码-说明文档)资源-CSDN文库 项目关键技术 开发工具&#xff1a;IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7 框架&#xff1a;ssm、Springboot 前端&…...

编程日记 2024/10/16 13:36:36

tcp_rmem中有三个值4896 131072 6291456是什么意思，有什么作用？

在 TCP 中&#xff0c;tcp_rmem参数的三个值分别具有以下含义和作用&#xff1a; 一、含义 “4896”&#xff1a; 通常代表 TCP 接收缓冲区的最小大小。这是接收端为接收数据预先分配的最小内存空间。当网络中数据量较小时&#xff0c;这个最小缓冲区可以确保有足够的空间来存储…...

编程日记 2024/10/16 13:35:35

转行AI产品经理：高薪诱惑，年薪90万不是梦！

近期有很多社招的小伙伴都在看转行的机会&#xff0c;同时马上要到了秋招的季节&#xff0c;校招生们都在积极选择第一份工作。所有人想要进入一个有前景、高薪高潜力的黄金赛道。 2024年如果大家看新机会&#xff0c;重点给大家推荐AI领域的岗位。先看一组数据&#xff1a; …...

编程日记 2024/10/16 13:34:33

javaWeb项目-ssm+jsp股票交易管理系统功能介绍

本项目源码&#xff08;点击下方链接下载&#xff09;&#xff1a;java-ssmjsp股票交易管理系统实现源码(项目源码-说明文档)资源-CSDN文库 项目关键技术 开发工具&#xff1a;IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7 框架&#xff1a;ssm、Springboot 前端&#xff…...

编程日记 2024/10/16 13:32:31

CentOS上安装SSL证书教程

在 CentOS 上&#xff0c;apt-get 是不可用的&#xff0c;因为 CentOS 使用的是 yum 或 dnf 包管理器。你可以通过 yum 或 dnf 安装 certbot 和 python3-certbot-nginx。以下是详细的步骤&#xff1a; 1. 启用 EPEL&#xff08;Extra Packages for Enterprise Linux&#xff0…...

编程日记 2024/10/16 13:30:29

单目相机和双目相机定位

1、单目相机 1.1模型 单目相机成像模型为小孔成像&#xff0c;涉及的坐标系包括世界坐标系、相机坐标系、图像坐标系以及像素坐标系。坐标系之间的转换关系如下&#xff1a; 1.2参数求解 张正友相机标定方法、设定世界坐标系精确求解 2、双目相机 2.1、模型 一般双目立体视…...

编程日记 2024/10/16 13:29:27

【Cadence27】HDL拷贝工程➕Allegro导出DXF和3D文件STP

【转载】Cadence Design Entry HDL 使用教程 【Cadence01】Cadence PCB Edit相对延迟与绝对延迟的显示问题 【Cadence02】Allegro引脚焊盘Pin设置为透明 【Cadence03】cadence不小心删掉钢网层怎么办&#xff1f; 【Cadence04】一般情况下Allegro PCB设计时的约束规则设置&a…...

编程日记 2024/10/16 13:28:25

2003-2024年上市公司政府补助数据+stata代码

政府补助数据2003-2024 范围&#xff1a;2003 - 2024年&#xff0c;全部A股上市公司 原始数据来源于国泰安&#xff0c;有计算代码和原始数据&#xff0c;可复现出计算结果 政府补贴&#xff0c;政府补助&#xff0c;政府津贴&#xff0c;2024数据全 计算结果&#xff1a;d…...

编程新知 2026/3/27 9:45:08

告别繁琐配置：用快马ai一键生成win10系统openclaw自动化安装脚本原型

最近在折腾一个自动化安装OpenClaw工具的项目&#xff0c;发现Windows 10下的环境配置特别麻烦。作为一个经常需要快速验证工具链的开发者&#xff0c;我摸索出了一套用InsCode(快马)平台快速生成原型的方法&#xff0c;分享给大家。 环境检测模块的实现 最头疼的就是处理不同用…...

编程新知 2026/3/27 8:50:46

LyricsX：macOS平台的多源歌词同步与显示技术方案

LyricsX&#xff1a;macOS平台的多源歌词同步与显示技术方案 【免费下载链接】LyricsX &#x1f3b6; Ultimate lyrics app for macOS. 项目地址: https://gitcode.com/gh_mirrors/ly/LyricsX LyricsX是一款专为macOS设计的开源歌词应用&#xff0c;通过集成多个歌词源和…...

编程新知 2026/3/27 8:12:28

第4章 编码规范-4.1 命名规范

在Python中&#xff0c;变量、常量、模块、包、函数、类、对象、属性、方法和异常类都具有一定的命名规范。但是&#xff0c;这些命名规范都是通用性规范&#xff0c;而不是强制性规范&#xff0c;所以具体的命名规范还需要以开发项目的要求为主。&#xff08;1&#xff09;变量…...

编程新知 2026/3/27 7:34:14

英雄联盟智能助手：5个提升游戏体验的核心技巧

英雄联盟智能助手&#xff1a;5个提升游戏体验的核心技巧 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 你是否曾经在英雄联盟游…...

编程新知 2026/3/27 7:30:13

告别树莓派原生系统：我在SpotMicro上成功部署ROS Kinetic的完整踩坑记录

从树莓派到ROS Kinetic&#xff1a;SpotMicro四足机器人深度改造实战 当树莓派原生系统在SpotMicro项目上反复报错时&#xff0c;我盯着纹丝不动的前腿舵机&#xff0c;意识到是时候转向更专业的ROS方案了。这不是简单的系统切换&#xff0c;而是一次从底层架构到控制逻辑的全面…...

编程新知 2026/3/27 7:22:13

轻量级MCU命令行交互系统设计与优化

1. 轻量级MCU命令行交互系统设计指南1.1 系统概述在嵌入式系统开发过程中&#xff0c;调试和维护阶段往往需要与单片机进行参数交互和操作控制。传统解决方案如RT-Thread的finsh组件虽然功能强大&#xff0c;但对于资源受限的MCU&#xff08;如ROM<64KB&#xff0c;RAM<8…...

编程新知 2026/3/27 6:37:17

【FastAPI 2.0流式AI响应终极指南】：20年架构师亲授异步SSE/Chunked Transfer实战避坑清单

第一章&#xff1a;FastAPI 2.0流式AI响应面试概览在现代AI应用开发中&#xff0c;面试场景下的实时交互体验正成为关键评估维度。FastAPI 2.0 引入了对原生异步流式响应&#xff08;StreamingResponse&#xff09;的深度优化&#xff0c;支持 Server-Sent Events&#xff08;S…...

编程新知 2026/3/27 5:57:00

viem ABI工具使用教程：编码、解码和类型推断全攻略

viem ABI工具使用教程&#xff1a;编码、解码和类型推断全攻略 【免费下载链接】viem TypeScript Interface for Ethereum 项目地址: https://gitcode.com/gh_mirrors/vi/viem viem是一个轻量级、可组合且类型安全的TypeScript以太坊接口工具库&#xff0c;其强大的ABI工…...

编程新知 2026/3/27 5:20:45

SVG-Edit：开源矢量编辑在浏览器工具中的创新实践

SVG-Edit&#xff1a;开源矢量编辑在浏览器工具中的创新实践 【免费下载链接】svgedit Powerful SVG-Editor for your browser 项目地址: https://gitcode.com/gh_mirrors/sv/svgedit SVG-Edit是一款基于浏览器环境的开源矢量图形编辑工具&#xff0c;提供在线SVG编辑能…...

编程新知 2026/3/27 5:04:29