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

【前端】前端设计中的响应式设计详解

news 2026/2/10 22:40:21

文章目录

  • 前言
  • 一、响应式设计的定义与作用
  • 二、响应式设计的原则
  • 三、响应式设计的实现
  • 四、响应式设计的最佳实践
  • 总结

前言

在当今数字化时代，网站和应用程序需要适应各种设备，从桌面电脑到平板电脑和手机。响应式设计应运而生，成为一种可以适配不同设备的设计方法，极大地提升了用户体验。本文将详细介绍前端设计中的响应式设计，并提供相应的代码示例。

一、响应式设计的定义与作用

响应式设计是一种根据不同设备的屏幕尺寸和分辨率，自适应调整页面布局和内容的设计方法。它的主要作用是确保网站或应用程序在各种设备上都能够良好地展示，从而提高用户体验。同时，响应式设计还能减少开发和维护成本，因为开发者只需要维护一个页面，而不是针对每个设备都创建一个独立的页面。

对比图：
运行代码后在正常浏览器中样式：
在这里插入图片描述

拖动浏览器窗口后的样式：（自动缩放）
在这里插入图片描述

二、响应式设计的原则

  • 弹性布局：页面布局应该根据设备的屏幕尺寸和分辨率自动调整，而不是使用固定的像素值。这可以通过CSS中的flexbox和grid布局来实现。
  • 可伸缩的图片：图片应该能够根据屏幕尺寸和分辨率自适应调整大小，以防止在小屏幕上发生溢出问题。可以使用CSS中的max-width和height属性来实现。
  • 媒体查询：媒体查询是一种在CSS中根据设备屏幕尺寸和分辨率来应用不同样式的方法。它允许开发者为不同的屏幕尺寸定义不同的样式规则。
  • 断点设计：断点是指在响应式设计中，页面布局需要根据设备屏幕尺寸和分辨率进行调整的关键点。开发者可以在CSS中使用@media规则来定义这些断点。

三、响应式设计的实现

  • 使用Bootstrap框架
    Bootstrap是一个流行的前端框架，它提供了许多响应式设计的组件和工具。使用Bootstrap可以快速地实现响应式设计。以下是一个使用Bootstrap的示例代码：
html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Bootstrap Example</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body><div class="container"><div class="row"><div class="col-sm-4"><h3>Column 1</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p></div><div class="col-sm-4"><h3>Column 2</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p></div><div class="col-sm-4"><h3>Column 3</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p></div></div></div>
</body>
</html>

在这个示例中，我们使用了Bootstrap的grid系统来创建一个响应式的布局。在不同的屏幕尺寸下，列（column）的宽度会自动调整。

  • 自定义CSS

除了使用框架外，还可以使用自定义的CSS来实现响应式设计。以下是一个使用自定义CSS的示例代码：

html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Custom CSS Example</title><style>.container {display: flex;flex-wrap: wrap;justify-content: space-between;}.box {flex-basis: calc(33.33% - 20px);margin-bottom: 20px;}@media (max-width: 768px) {.container {flex-direction: column;}.box {flex-basis: 100%;}}</style>
</head>
<body><div class="container"><div class="box"><h3>Box 1</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p></div><div class="box"><h3>Box 2</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p></div><div class="box"><h3>Box 3</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p></div></div>
</body>
</html>

在这个示例中，我们定义了一个基本的弹性布局，并使用媒体查询来调整小屏幕下的布局。当屏幕宽度小于或等于768px时，容器（container）的方向会变为纵向，盒子（box）的宽度会变为100%。

四、响应式设计的最佳实践

设置视口：在HTML文件的标签中添加，以确保页面根据设备屏幕宽度缩放。

使用相对单位：尽量使用相对单位（如百分比、em、rem等）来设定宽度、字体大小等样式，使页面在不同屏幕尺寸下自然缩放。

优化图片：使用响应式图像以适应不同分辨率的设备。可以使用HTML5的元素和srcset属性来提供不同分辨率的图片。

考虑触摸设备：确保所有交互元素都适用于触摸设备，如适当增大按钮和链接的大小以便于触摸操作。

测试：在各种设备和屏幕尺寸上对页面进行测试，以确保响应式设计的有效性。可以使用浏览器的开发者工具或第三方在线工具进行模拟测试。

总结

响应式设计是现代前端开发中不可或缺的一部分，它确保了网站或应用程序在各种设备上都能够提供良好的用户体验。通过遵循响应式设计的原则和实现方法，开发者可以创建出适应不同屏幕尺寸和设备的网页布局。

相关文章：

【前端】前端设计中的响应式设计详解

文章目录 前言一、响应式设计的定义与作用二、响应式设计的原则三、响应式设计的实现四、响应式设计的最佳实践总结 前言 在当今数字化时代&#xff0c;网站和应用程序需要适应各种设备&#xff0c;从桌面电脑到平板电脑和手机。响应式设计应运而生&#xff0c;成为一种可以适…...

编程日记 2025/3/5 2:45:16

探秘基带算法：从原理到5G时代的通信变革【四】Polar 编解码（二）

文章目录 2.3.3 极化编码巴氏参数与信道可靠性比特混合生成矩阵编码举例 2.3.4 极化译码最小单元译码串行抵消译码&#xff08;SC译码&#xff09;算法SCL译码算法 2.3.5 总结**Polar 码的优势****Polar 码的主要问题****Polar 码的应用前景** 2.3.6 **参考文档** 本博客为系列…...

编程日记 2025/3/5 2:44:14

打开 Windows Docker Desktop 出现 Docker Engine Stopped 问题

一、关联文章： 1、Docker Desktop 安装使用教程 2、家庭版 Windows 安装 Docker 没有 Hyper-V 问题 3、安装 Windows Docker Desktop - WSL问题 二、问题解析 打开 Docker Desktop 出现问题，如下： Docker Engine Stopped ： Docker引擎停止三、解决方法 1、检查服务是否…...

编程日记 2025/3/5 2:38:09

6.人工智能与机器学习

一、人工智能基本原理 1. 人工智能&#xff08;AI&#xff09;定义与范畴 核心目标&#xff1a;模拟人类智能行为&#xff08;如推理、学习、决策&#xff09;分类&#xff1a; 弱人工智能&#xff08;Narrow AI&#xff09;&#xff1a;专精单一任务&#xff08;如AlphaGo、…...

编程日记 2025/3/5 2:36:07

RabbitMQ怎么实现延时支付？

一、使用“死信队列”消息过期时间 1、原理&#xff1a; 设置消息”存活时间“&#xff0c;如果没有被及时消费&#xff0c;就会被丢弃到一个”死信队列“&#xff0c;然后消费者监听这个死信队列处理消息 2、步骤&#xff1a; 2.1、创建两个队列&#xff1a; 2.1.1、普通队…...

编程日记 2025/3/5 2:35:06

vite-vue3使用web-worker应用指南和报错解决

主线程&#xff1a;初始化worker和监听子线程的消息 let worker: any; const salesConfigData ref<any[]>([]); // 显示非上架 const showNotList ref(false);// /src/views/ceshi/salesConfig/worker.js worker new Worker(new URL("/src/views/ceshi/salesConf…...

编程日记 2025/3/5 2:33:04

校园快递助手小程序毕业系统设计

系统功能介绍 管理员端 1&#xff09;登录&#xff1a;输入账号密码进行登录 2&#xff09;用户管理&#xff1a;查看编辑添加删除 学生信息 3&#xff09;寄件包裹管理&#xff1a;查看所有的包裹信息&#xff0c;及物流信息 4&#xff09;待取件信息&#xff1a;查看已到达的…...

编程日记 2025/3/5 2:31:01

python量化交易——金融数据管理最佳实践——使用qteasy管理本地数据源

文章目录 统一定义的金融历史数据表最重要的数据表数据表的定义交易日历表的定义&#xff1a;交易日历表: trade_calendar qteasy是一个功能全面且易用的量化交易策略框架&#xff0c; Github地址在这里。使用它&#xff0c;能轻松地获取历史数据&#xff0c;创建交易策略并完…...

编程日记 2025/3/5 2:29:59

BIO、NIO、AIO、Netty从简单理解到使用

Java编程中BIO、NIO、AIO是三种不同的I/O&#xff08;输入/输出&#xff09;模型&#xff0c;它们代表了不同的I/O处理方式。 Netty就是基于Java的NIO&#xff08;New Input/Output&#xff09;类库编写的一个高性能、异步事件驱动的网络应用程序框架&#xff0c;用于快速开发可…...

编程日记 2025/3/5 2:22:50

计算机毕业设计SpringBoot+Vue.js工厂车间管理系统源码+文档+PPT+讲解)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

编程日记 2025/3/5 2:19:47

一、图形图像的基本概念

文章目录 一、分辨率概念二、图形图像的区别三、位图和矢量图的区别 一、分辨率概念 图形显示计数中的分辨率概念有三种&#xff0c;即屏幕分辨率、显示分辨率和显卡分辨率。它们既有区别又有着密切的联系&#xff0c;对图形显示的处理有极大的影响。 1.屏幕分辨率 显示器分辨…...

编程日记 2025/3/5 2:16:43

前端跨域问题初探：理解跨域及其解决方案概览

在当今的Web开发中&#xff0c;跨域问题是一个常见且棘手的挑战 随着前端技术的不断进步&#xff0c;越来越多的应用需要从不同的域名、协议或端口获取资源 然而&#xff0c;浏览器的同源策略&#xff08;Same-Origin Policy&#xff09;限制了这种跨域请求&#xff0c;以确保…...

编程日记 2025/3/5 2:15:42

SQL分组问题

下列为电商公司用户访问时间数据 统计某个用户连续的访问记录&#xff0c;如果时间间隔小于60s&#xff0c;就分为一组 id ts 1001 17523641234 1001 17523641256 1002 17523641278 1001 17523641334 1002 17523641434 1001 17523641534 1001 17523641544 1002 17523…...

编程日记 2025/3/5 2:13:39

Oracle 数据库基础入门（二）：深入理解表的约束

在 Oracle 数据库的学习进程中&#xff0c;表的约束是构建健壮、准确且高效数据库的关键要素。约束如同数据库的 “规则守护者”&#xff0c;它通过对数据的限制&#xff0c;确保了数据的完整性和一致性&#xff0c;就如同交通规则保障道路上车辆行驶的有序性一样。对于 Java 全…...

编程日记 2025/3/5 2:09:33

DeepSeek掘金——DeepSeek-R1驱动的房地产AI代理

DeepSeek掘金——DeepSeek-R1驱动的房地产AI代理 本文探讨如何使用 Smolagents 和 DeepSeek-R1 构建房地产代理，并利用工具进行网页抓取和数据导出。 AI 代理对于自动化复杂的推理任务至关重要。Smolagents 是由 Hugging Face 开发的轻量级 AI 代理框架，允许将大型语言模型 …...

编程日记 2025/3/5 2:07:30

WebP2P技术在嵌入式设备中的应用：EasyRTC音视频通话SDK如何实现高效通信？

在数字化时代&#xff0c;实时通信技术&#xff08;RTC&#xff09;与人工智能&#xff08;AI&#xff09;的融合正在重塑各个行业的交互方式。从在线教育到远程医疗&#xff0c;从社交娱乐到企业协作&#xff0c;RTC的应用场景不断拓展。然而&#xff0c;传统的RTC解决方案往往…...

编程日记 2025/3/5 2:04:24

【零基础到精通Java合集】第三集：流程控制与数组

针对**“流程控制与数组”**的15分钟课程内容设计，聚焦代码逻辑设计与数据结构基础： 课程标题：流程控制与数组（15分钟） 目标：掌握分支/循环语法与数组操作，能编写条件判断与数据遍历程序 一、课程内容与时间分配 0-2分钟 课程目标与逻辑导图 明确学习目标：分支结构、…...

编程日记 2025/3/5 2:03:20

VsCode + EIDE + OpenOCD + STM32(野火DAP) 开发环境配置

VsCode EIDE OpenOCD STM32(野火DAP) 开发环境配置 接受了新时代编辑器的我&#xff0c;实在受不了Keil的上古编辑页面&#xff0c;周树人说过&#xff1a;由奢入俭难&#xff0c;下面我们一起折腾一下开源软件Vscode&#xff0c; 用以开发51和STM32&#xff0c;有错误之处&…...

编程日记 2025/3/5 2:01:18

【vue-echarts】——01.认识echarts

文章目录 前言一、echarts二、使用步骤1.vue cli创建项目并安装第三方模块echarts2.显示图表总结前言 定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。2021年1月26日晚，Apache基金会官方宣布ECharts项目正式毕业。 一…...

编程日记 2025/3/5 1:55:10

【http://noi.openjudge.cn/】4.3算法之图论——1538:Gopher II

[【http://noi.openjudge.cn/】4.3算法之图论——1538:Gopher II] 题目 查看提交统计提问 总时间限制: 2000ms 内存限制: 65536kB 描述 The gopher family, having averted the canine threat, must face a new predator. The are n gophers and m gopher holes, each at di…...

编程日记 2025/3/5 1:51:06

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

编程新知 2026/2/8 16:53:48

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2026/2/10 16:20:04

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/9/16 21:01:58

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

编程新知 2025/11/9 1:27:18

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/9/27 2:43:26

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2026/1/4 5:02:00

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/12/31 6:28:08

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

编程新知 2025/12/19 20:46:15

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2026/2/4 16:17:25

如何在最短时间内提升打ctf（web)的水平？

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

编程新知 2026/1/28 5:55:15