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

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

news 2025/12/16 6:44:42

响应式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/18 11:13:16

利用java结合python实现gis在线绘图,主要技术java+python+matlab+idw+Kriging

主要技术javapythonmatlabidwKriging** GIS中的等值面和等高线绘图主要用于表达连续空间数据的分布情况&#xff0c;特别适用于需要展示三维空间中某个变量随位置变化的应用场景。 具体来说&#xff0c;以下是一些适合使用GIS等值面和等高线绘图的场景&#xff1a; 地形与地貌…...

编程日记 2024/8/18 11:12:15

Android全面解析之context机制（三）： 从源码角度分析context创建流程（下）

前言 前面已经讲了什么是context以及从源码角度分析context创建流程&#xff08;上&#xff09;。限于篇幅把四大组件中的广播和内容提供器的context获取流程放在了这篇文章。广播和内容提供器并不是context家族里的一员&#xff0c;所以他们本身并不是context&#xff0c;因而…...

编程日记 2024/8/18 11:11:13

执行docker compose命令出现 Additional property include is not allowed

问题背景 在由docker-compose.yml的文件目录下执行命令 docker compose up -d 出现错误 Additional ininoperty include is not allowed 原因 我的docker-compose.yml 文件中出现了include标签旧版本的docker-compose 不支持此标签 解决办法 下载支持的docker-compose 解决…...

编程日记 2024/8/18 11:09:12

STM32通过I2C硬件读写MPU6050

目录 STM32通过I2C硬件读写MPU6050 1. STM32的I2C外设简介 2. STM32的I2C基本框图 3. STIM32硬件I2C主机发送流程 10位地址与7位地址的区别 7位主机发送的时序流程 7位主机接收的时序流程 4. STM32硬件与软件的波形对比 5. STM32配置硬件I2C外设流程 6. STM32的I2C.h…...

编程日记 2024/8/18 11:07:09

ubuntu2204-中文输入法-pycharm-python-django开发环境搭建

文章目录 1.系统常用设置1.1.安装中文输入法1.2.配置输入法1.3.卸载输入法1.4.配置镜像源2.java安装3.pycharm安装与启动4.卸载ubuntu2204默认版本5.安装Anaconda5.1.安装软件依赖包5.2.安装命令5.3.激活安装5.4.常用命令5.5.修改默认启动源6.安装mysql6.1.离线安装mysql6.2.在…...

编程日记 2024/8/18 11:03:05

【学习笔记】Matlab和python双语言的学习(一元线性回归）

文章目录 前言一、一元线性回归回归分析的一般步骤一元线性回归的基本形式回归方程参数的最小二乘法估计对回归方程的各种检验估计标准误差的计算回归直线的拟合优度判定系数显著性检验 二、示例三、代码实现----Matlab四、代码实现----python回归系数的置信区间公式残差的置信…...

编程日记 2024/8/18 11:02:03

LeetCode //C - 316. Remove Duplicate Letters

316. Remove Duplicate Letters Given a string s, remove duplicate letters so that every letter appears once and only once. You must make sure your result is the smallest in lexicographical order among all possible results. Example 1: Input: s “bcabc”…...

编程日记 2024/8/18 10:57:58

【ARM+Codesys 客户案例 】RK3568/A40i/STM32+CODESYS在工厂自动化中的应用：PCB板焊接机

现代化生产中&#xff0c;电子元件通常会使用自动化设备来进行生产&#xff0c;例如像PCB&#xff08;印刷电路板&#xff09;的组装。但是生产过程中也会面临一些问题&#xff0c;类似于如何解决在PCB板上牢固、精准地安装各种组件呢&#xff1f;IBL Lttechnik GmbH公司的CM80…...

编程日记 2024/8/18 10:56:55

【二分查找】--- 初阶题目赏析

Welcome to 9ilks Code World (๑•́ ₃ •̀๑) 个人主页: 9ilk (๑•́ ₃ •̀๑) 文章专栏&#xff1a; 算法Joureny 上篇我们讲解了关于二分的朴素模板和边界模板&#xff0c;本篇博客我们试着运用这些模板。 &#x1f3e0; 搜索插入位置 &#x1f4cc; 题目…...

编程日记 2024/8/18 10:55:54

【PostgreSQL003】PostgreSQL数据表空间膨胀，磁盘爆满，应用宕机（经验总结，已更新）

1.一直以来想写下基于PostgreSQL的系列文章&#xff0c;作为较火的数据ETL工具&#xff0c;也是日常项目开发中常用的一款工具&#xff0c;最近刚好挤时间梳理、总结下这块儿的知识体系。 2.熟悉、梳理、总结下PostgreSQL数据库相关知识体系。空间膨胀&#xff08;主键、外键、…...

编程日记 2024/8/18 10:54:53

C语言第20天笔记

文件操作 概述 什么是 文件 文件时保存在外存储器上&#xff08;一般代指磁盘&#xff0c;也可以是U盘、移动硬盘等&#xff09;的数据的集合。 文件操作体现在哪几个方面 1. 文件内容的读取 2. 文件内容的写入 数据的读取和写入可被视为针对文件进行输入和输出的操作&a…...

编程日记 2024/8/18 10:52:50

为什么穷大方

为什么有些人明明很穷&#xff0c;却非常的大方呢&#xff1f; 因为他们认知太低&#xff0c;根本不懂钱的重要性&#xff0c;总是想着及时享乐&#xff0c;所以一年到头也存不了什么钱。等到家人孩子需要用钱的时候&#xff0c;什么也拿不出来&#xff0c;还到处去求人。 而真…...

编程日记 2024/8/18 10:51:49

HiveSQL实战——大数据开发面试高频SQL题

查询每个区域的男女用户数 0 问题描述 每个区域内男生、女生分别有多少个 1 数据准备 use wxthive; create table t1_stu_table (id int,name string,class string,sex string ); insert overwrite table t1_stu_table values(4,张文华,二区,男),(3,李思雨,一区,女),(1…...

编程日记 2024/8/18 10:48:45

RabbitMQ集群 - 普通集群搭建、宕机情况

文章目录 RabbitMQ 普通集群概述集群搭建数据准备启动容器宕机情况 RabbitMQ 普通集群 概述 1&#xff09;普通模式中所有节点没有主从之分&#xff0c;所有节点的元数据&#xff08;交换机、队列、绑定等&#xff09;都是一致的. 例如只要有任意一个节点上面 新增交换机&…...

编程日记 2024/8/18 10:47:44

xssDOM型练习

文章目录 例1要求 例2代码解析方法 例3例4例5例6例7例8 例1 本题通过get接收并传递参数&#xff0c;所有参数不经过过滤直接放入h2标签里面。 要求 1.需要页面弹出1337 2.不能与用户交互 官方认为innerHTML中script标签不安全&#xff0c;所以将其禁用&#xff0c;但只禁用了…...

编程日记 2024/8/18 10:45:42

python中的gradio使用麦克风时报错

python中的gradio使用麦克风时报错 当运行至 import gradio as gr with gr.Blocks() as demo:with gr.Tab("microphone transcriber"):gr.Audio(source"microphone", type"numpy", streamingTrue)demo.queue()##访问链接 https://ip:1235/demo…...

编程日记 2024/8/18 10:43:40

Oracle（63）什么是临时表（Temporary Table）？

临时表&#xff08;Temporary Table&#xff09;是一种特殊类型的表&#xff0c;用于存储临时数据&#xff0c;这些数据在会话期间或事务期间是短暂的。临时表在不同的数据库系统中都有实现&#xff0c;但功能和特性可能有所不同。临时表通常用于存储中间计算结果、临时数据处理…...

编程日记 2024/8/18 10:41:37

《Techporters架构搭建》-Day06 国际化

什么是国际化&#xff1f; 国际化&#xff0c;也叫i18n&#xff0c;为什么叫i18n呢&#xff1f; "i18n"是国际化&#xff08;internationalization&#xff09;的缩写&#xff0c;数字18代表了国际化这个单词中间的字母数量。类似这样的缩写还有k8s&#xff08;kube…...

编程日记 2024/8/18 10:40:35

Linux ACL 访问控制

今天给伙伴们分享一下Linux ACL 访问控制&#xff0c;希望看了有所收获。 我是公众号「想吃西红柿」「云原生运维实战派」作者&#xff0c;对云原生运维感兴趣&#xff0c;也保持时刻学习&#xff0c;后续会分享工作中用到的运维技术&#xff0c;在运维的路上得到支持和共同进步…...

编程日记 2024/8/18 10:39:34

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2025/12/9 1:55:05

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

编程新知 2025/11/4 20:56:54

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2025/12/6 15:11:15

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

编程新知 2025/9/13 20:07:18

Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

编程新知 2025/10/4 21:24:40

多模态图像修复系统：基于深度学习的图片修复实现

多模态图像修复系统：基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型（Stable Diffusion Inpainting）实现图像修复功能，结合文本描述和图片输入，对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

编程新知 2025/9/9 21:28:16

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

编程新知 2025/12/13 23:39:33

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

编程新知 2025/8/19 22:24:50

为什么要创建 Vue 实例

核心原因：Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...

编程新知 2025/10/23 23:35:01

WPF八大法则：告别模态窗口卡顿

⚙️ 核心问题&#xff1a;阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程&#xff0c;导致后续逻辑无法执行&#xff1a; var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...

编程新知 2025/12/9 19:36:52