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

响应式Web设计：纯HTML和CSS的实现技巧-1

news 2026/5/20 5:37:13

响应式Web设计（Responsive Web Design, RWD）是一种旨在确保网站在不同设备和屏幕尺寸下都能良好运行的网页设计策略。通过纯HTML和CSS实现响应式设计，主要依赖于媒体查询（Media Queries）、灵活的布局、可伸缩的图片和字体、以及适当的视口设置等技术。

1. 视口元标签（Viewport Meta Tag）

在HTML文档的<head>部分添加视口元标签是响应式设计的基础。这个标签告诉浏览器如何控制页面的尺寸和比例。最常用的设置是：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • width=device-width：使页面的宽度与设备的屏幕宽度一致。
  • initial-scale=1.0：设置初始缩放比例为1:1，即页面按照实际大小显示，不进行缩放。

2. 媒体查询（Media Queries）

媒体查询是CSS3引入的一个强大功能，它允许你根据不同的媒体类型和条件应用不同的样式规则。在响应式设计中，媒体查询主要用于根据不同的屏幕尺寸应用不同的布局和样式。

示例：
/* 基础样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 屏幕宽度大于600px时应用的样式 */
@media (min-width: 600px) {
.container {
width: 80%;
margin: auto;
}
}
/* 屏幕宽度小于600px时应用的样式 */
@media (max-width: 599px) {
.container {
width: 100%;
padding: 20px;
}
}

在这个例子中，我们定义了一个.container类，它根据屏幕宽度的大小改变其宽度和边距。

3. 灵活的布局（Flexbox 和 Grid）

Flexbox（弹性盒模型）和Grid（网格布局）是CSS3中引入的两种强大的布局模式，它们为创建响应式布局提供了极大的便利。

Flexbox

Flexbox允许容器内的元素能够在不同的屏幕尺寸和方向下灵活地排列、对齐和分配空间。

.flex-container {
display: flex;
flex-wrap: wrap; /* 允许子元素换行 */
justify-content: space-between; /* 子元素之间的间隔 */
}
.flex-item {
flex: 1; /* 子元素平均分配空间 */
padding: 10px;
}
Grid

Grid布局提供了一个二维布局系统，通过行和列来定位元素。它非常适合创建复杂的响应式布局。

.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 根据容器宽度自动填充列，每列最小200px，最大为可用空间 */
gap: 10px; /* 网格项之间的间隔 */
}
.grid-item {
/* 网格项样式 */
}

4. 可伸缩的图片

为了确保图片在不同设备上都能良好显示，你可以使用CSS的max-width属性结合height: auto;来使图片可伸缩。

img {
max-width: 100%;
height: auto;
}

这样设置后，图片将自动调整其宽度以适应其父容器的宽度，同时保持其原始的宽高比。

5. 字体大小与可访问性

在响应式设计中，字体大小也应该随着屏幕尺寸的变化而调整，以确保内容的可读性。你可以使用vw（视口宽度的百分比）或em/rem单位来设置字体大小，或者使用媒体查询来定义不同的字体大小规则：

/* 使用vw单位 */
body {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}
/* 使用媒体查询 */
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
@media (min-width: 601px) and (max-width: 120

未完 

相关文章：

响应式Web设计：纯HTML和CSS的实现技巧-1

响应式Web设计&#xff08;Responsive Web Design, RWD&#xff09;是一种旨在确保网站在不同设备和屏幕尺寸下都能良好运行的网页设计策略。通过纯HTML和CSS实现响应式设计&#xff0c;主要依赖于媒体查询&#xff08;Media Queries&#xff09;、灵活的布局、可伸缩的图片和字…...

编程日记 2024/8/19 6:16:16

FrereRTOS事件组

文章目录 一、事件组概念与操作1、事件组的概念2、事件组的操作 二、事件组函数1、创建2、删除3、设置事件4、等待事件5、同步点 三、示例&#xff1a;广播四、示例&#xff1a;等待一个任意事件五、示例: 等待多个事件都发生 学校组织秋游&#xff0c;组长在等待&#xff1a; …...

编程日记 2024/8/19 6:15:14

【经典算法】BFS_最短路问题

目录 1. 最短路问题介绍2. 算法原理和代码实现(含题目链接)1926.迷宫中离入口最近的出口433.最小基因变化127.单词接龙675.为高尔夫比赛砍树 3. 算法总结 1. 最短路问题介绍 最短路径问题是图论中的一类十分重要的问题。本篇文章只介绍边权为1(或边权相同)的最简单的最短路径问…...

编程日记 2024/8/19 6:14:12

【题目/训练】：双指针

引言 我们已经在这篇博客【算法/学习】双指针-CSDN博客里面讲了双指针、二分等的相关知识。 现在我们来做一些训练吧 经典例题 1. 移动零 思路&#xff1a; 使用 0 当做这个中间点&#xff0c;把不等于 0(注意题目没说不能有负数)的放到中间点的左边&#xff0c;等于 0 的…...

编程日记 2024/8/19 6:13:10

LLVM - 编译器后端-指令选择

一&#xff1a;概述 任何后端的核心都是指令选择。LLVM 实现了几种方法&#xff1b;在本篇文章中&#xff0c;我们将通过选择有向无环图&#xff08;DAG&#xff09;和全局指令选择来实现指令选择。 在本篇文章中&#xff0c;我们将学习以下主题&#xff1a; • 定义调…...

编程日记 2024/8/19 6:11:05

ES+FileBeat+Kibana日志采集搭建体验

1.环境准备 需要linux操作系统&#xff0c;并安装了docker环境 此处使用虚拟机演示。&#xff08;虚拟机和docker看参考我之前写的文章&#xff09; VirtualBox安装Oracle Linux 7.9全流程-CSDN博客 VirtualBox上的Oracle Linux虚拟机安装Docker全流程-CSDN博客 简单演示搭建ES…...

编程日记 2024/8/19 6:06:58

Dockerfile常用指令详解

Dockerfile 是一个用于定义 Docker 镜像构建过程的脚本文件&#xff0c;其中包含了一系列指令&#xff0c;用于指定如何构建和配置镜像。以下是一些常用的 Dockerfile 指令及其示例用法&#xff1a; 1. FROM 指定基础镜像&#xff0c;Dockerfile 必须以该指令开始。 示例&am…...

编程日记 2024/8/19 6:05:56

【vue】浏览器兼容相关

Vue.js 是一个流行的前端 JavaScript 框架&#xff0c;它支持构建单页应用和复杂的用户界面。Vue.js 的核心库本身对浏览器的支持情况如下&#xff1a; Vue.js 2.x 最低支持版本&#xff1a;IE9 及以上版本。特性支持&#xff1a;ES5。兼容性&#xff1a;Vue 2.x 在发布时就考…...

编程日记 2024/8/19 6:04:55

【区块链+金融服务】基于区块链的区域股权金融综合服务平台 | FISCO BCOS应用案例

区域性股权市场是我国资本市场的重要组成部分&#xff0c;是多层次资本市场体系的基石。区块链技术与区域性股权市场 分散特征天然匹配&#xff0c;从新型金融基础设施层面为场外参与各方提供公共的可信服务&#xff0c;以技术手段完善市场基础条 件&#xff0c;弥补区域性短板…...

编程日记 2024/8/19 6:02:52

string字符串和json对象相互转换问题

//响应体String responseStr EntityUtils.toString(response.getEntity());log.debug("下单响应码:{},响应体:{}",statusCode,responseStr);if(statusCode HttpStatus.OK.value()){JSONObject jsonObject JSONObject.parseObject(responseStr);if(jsonObject.cont…...

编程日记 2024/8/19 6:01:49

【生成式人工智能-十一一个不修改模型就能加速语言模型生成的方法】

一个加速语言模型生成的方法 现在语言模型的一个弊端speculative decoding预言家预测的问题 speculative decoding 模块的实现方法NAT Non-autoregressive模型压缩使用搜索引擎 一些更复杂些的speculative decoding 实现方式 speculative decoding 是一个适用于目前生成模型的加…...

编程日记 2024/8/19 6:00:43

Rust 错误处理

Rust 错误处理 Rust 是一种系统编程语言，以其内存安全、高并发和实用性而著称。在 Rust 中，错误处理是一个核心概念，它通过提供 Result 和 Option 类型来鼓励开发者显式地处理可能出现的错误，而不是依赖异常机制。本文将深入探讨 Rust 中的错误处理机制，包括 Result 和 O…...

编程日记 2024/8/19 5:59:37

程序与进程 linux系统

程序与进程 程序 &#xff08; program &#xff09;&#xff1a; 通常为 binary program &#xff0c;放置在储存媒体中&#xff08;如硬盘、光盘、软盘、磁带等&#xff09;&#xff0c; 为实体文件的型态存在&#xff1b;二进制文件&#xff0c;比如静态 /bin/date…...

编程日记 2024/8/19 5:58:33

使用MongoDB构建AI：Story Tools Studio将生成式AI引入Myth Maker AI游戏

Story Tools Studio利用先进的生成式AI技术&#xff0c;打造沉浸式、个性化、无穷尽的情景体验。 Story Tools Studio创始人兼首席执行官Roy Altman表示&#xff1a;“我们的旗舰游戏Myth Maker AI采用的是我们自主研发的、以AI为驱动的专家指导型故事生成器MUSE&#xff0c;它…...

编程日记 2024/8/19 5:57:30

鸿蒙UIAbility组件概述(二)

鸿蒙UIAbility组件概述 UIAbility组件基本用法指定UIAbility的启动页面获取UIAbility的上下文信息 UIAbility组件与UI的数据同步使用EventHub进行数据通信使用AppStorage/LocalStorage进行数据同步 UIAbility组件间交互&#xff08;设备内&#xff09;启动应用内的UIAbility启动…...

编程日记 2024/8/19 5:56:26

Oracle（70）如何优化SQL查询？

优化SQL查询是数据库管理的重要部分&#xff0c;旨在提高查询性能&#xff0c;减少响应时间和资源消耗。以下是一些常见的SQL查询优化技术&#xff0c;结合代码示例详细说明。 1. 使用索引 索引是优化查询性能的最常见方法之一。索引可以显著减少数据检索的时间。 示例 假设…...

编程日记 2024/8/19 5:55:23

深度剖析：Jenkins构建任务无法中断的原因及解决方案

个人名片 &#x1f393;作者简介&#xff1a;java领域优质创作者 &#x1f310;个人主页&#xff1a;码农阿豪 &#x1f4de;工作室&#xff1a;新空间代码工作室&#xff08;提供各种软件服务&#xff09; &#x1f48c;个人邮箱&#xff1a;[2435024119qq.com] &#x1f4f1…...

编程日记 2024/8/19 5:54:17

【YOLO】常用脚本

目录 VOC转YOLO划分训练集、测试集与验证集 VOC转YOLO import os import xml.etree.ElementTree as ETdef convert(size, box):dw 1. / size[0]dh 1. / size[1]x (box[0] box[1]) / 2.0y (box[2] box[3]) / 2.0w box[1] - box[0]h box[3] - box[2]x x * dww w * dwy…...

编程日记 2024/8/19 5:53:14

Springboot IOC DI理解及实现+JUnit的引入+参数配置

一、JavaConfig 我们通常使用 Spring 都会使用 XML 配置&#xff0c;随着功能以及业务逻辑的日益复杂&#xff0c;应用伴随着大量的 XML 配置文件以及复杂的 bean 依赖关系&#xff0c;使用起来很不方便。 在 Spring 3.0 开始&#xff0c;Spring 官方就已经开始推荐使用 Java…...

编程日记 2024/8/19 5:52:09

CeresPCL 最小二乘插值（曲线拟合）

一、简介 在多项式插值时，当数据点个数较多时，插值会导致多项式曲线阶数过高，带来不稳定因素。因此我们可以通过固定幂基函数的最高次数 m(m < n)，来对我们要拟合的曲线进行降阶。之前的函数形式就可以变为： 既然是最小二乘问题，那么就仍然可以使用Ceres来进行求解。 …...

编程日记 2024/8/19 5:51:04

PHP Font Lib 与其他字体库对比：为什么它是 PHP 开发者的首选

PHP Font Lib 与其他字体库对比&#xff1a;为什么它是 PHP 开发者的首选 【免费下载链接】php-font-lib A library to read, parse, export and make subsets of different types of font files. 项目地址: https://gitcode.com/gh_mirrors/ph/php-font-lib 在PHP开发领…...

编程新知 2026/5/20 5:03:55

会议纪要整理不清？如何将会议成果转化为可落地任务

身边不少HR朋友都有过纪要整理的困扰&#xff0c;一场会议或面谈后&#xff0c;花费大量时间整理&#xff0c;最终产出的纪要却零散杂乱&#xff0c;无法提炼可落地的任务&#xff0c;导致会议效果大打折扣。结合半年多的实测体验&#xff0c;整理出一套零基础也能上手的高效方…...

编程新知 2026/5/20 3:49:58

告别信号失真！手把手教你理解PCIe均衡中的预加重与去加重

PCIe信号均衡技术&#xff1a;预加重与去加重的实战解析 在高速串行通信领域&#xff0c;信号完整性始终是工程师面临的核心挑战。当PCIe总线速率从2.5GT/s演进到32GT/s甚至更高时&#xff0c;信号在传输过程中遭遇的高频衰减和码间干扰(ISI)问题变得尤为突出。预加重(Pre-emph…...

编程新知 2026/5/20 3:18:07

别再死记硬背Prompt了！用LangChain的ChatPromptTemplate，5分钟搞定角色扮演对话机器人

用LangChain的ChatPromptTemplate快速构建角色扮演对话机器人 你是否曾经为了设计一个能记住对话历史的客服机器人&#xff0c;不得不手动拼接几十行提示词&#xff1f;或者为了让AI扮演特定角色&#xff0c;反复调整系统消息却始终达不到理想效果&#xff1f;LangChain的Chat…...

编程新知 2026/5/20 3:11:01

AI芯片性能优化实战：Polyhedral编译在深度学习部署中的挑战与解决方案

1. 项目概述&#xff1a;当AI算法遇上硬件“翻译官”最近几年&#xff0c;AI模型从实验室走向千家万户&#xff0c;从云端服务器部署到我们口袋里的手机&#xff0c;这个过程中有一个角色至关重要&#xff0c;却又常常被算法工程师们视为“黑盒”——那就是AI芯片。我们写的PyT…...

编程新知 2026/5/20 2:04:52

Hermes Agent框架对接Taotoken自定义供应商的配置指南

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Hermes Agent框架对接Taotoken自定义供应商的配置指南 对于使用Hermes Agent框架的开发者而言&#xff0c;能够灵活接入不同的模型…...

编程新知 2026/5/20 1:41:10

Lenovo Legion Toolkit 终极指南：如何让你的拯救者笔记本性能提升30%

Lenovo Legion Toolkit 终极指南&#xff1a;如何让你的拯救者笔记本性能提升30% 【免费下载链接】LenovoLegionToolkit Lightweight Lenovo Vantage and Hotkeys replacement for Lenovo Legion laptops. 项目地址: https://gitcode.com/gh_mirrors/le/LenovoLegionToolkit …...

编程新知 2026/5/20 1:10:27

别再只用箱线图了！用R语言ggplot2绘制高颜值小提琴图，让你的SCI图表更专业

科研数据可视化进阶&#xff1a;用R语言打造专业级小提琴图 在生物医学领域的科研论文中&#xff0c;数据可视化是展示研究成果的关键环节。许多研究者习惯性地使用箱线图来呈现数据分布&#xff0c;却忽略了这种传统方法可能掩盖的重要信息细节。当面对复杂的数据分布模式时&…...

编程新知 2026/5/20 1:01:40

从零到一：ComfyUI IPAdapter 图像风格迁移终极指南

从零到一&#xff1a;ComfyUI IPAdapter 图像风格迁移终极指南 【免费下载链接】ComfyUI_IPAdapter_plus 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI_IPAdapter_plus 你是否曾梦想过将自己拍摄的照片变成大师级的艺术作品&#xff1f;或者想把朋友的肖像变成…...

编程新知 2026/5/20 0:32:08

从1秒到60ms：手把手教你用STM32硬件SPI驱动GC9A01 LCD，性能飙升实战

从1秒到60ms&#xff1a;STM32硬件SPI驱动GC9A01 LCD的性能优化实战 当你在嵌入式项目中遇到屏幕刷新缓慢的问题时&#xff0c;那种卡顿感简直让人抓狂。想象一下&#xff0c;你刚拿到一块1.28寸的GC9A01 LCD屏幕&#xff0c;满心欢喜地准备展示你的项目成果&#xff0c;却发现…...

编程新知 2026/5/19 23:14:25