CSS 响应式设计(补充)——WEB开发系列36

news/2024/9/19 0:04:24/ 标签: javascript, 前端, css, web前端, css3, 响应式

随着移动设备的普及,网页设计的焦点逐渐转向了响应式设计。响应式设计不仅要求网页在各种屏幕尺寸上良好展示,还要适应不同设备的特性。


一、响应式设计之前的灵活布局

响应式设计流行之前,网页布局通常是固定的或流动的。固定布局使用固定的像素宽度,而流动布局使用相对单位(如百分比)来调整页面的宽度。这些方法在移动设备上表现得并不理想,因为它们没有考虑到屏幕尺寸的多样性。

1.1 固定布局

固定布局的网页使用像素作为宽度单位,这意味着无论屏幕宽度如何,网页的宽度都是固定的。这种布局方式在桌面设备上效果良好,但在小屏幕设备上则可能导致内容溢出或无法正常显示。

示例:固定布局
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>固定布局示例</title><style>.container {width: 800px;margin: 0 auto;padding: 20px;background-color: #f0f0f0;}.content {background-color: #ffffff;padding: 20px;border: 1px solid #ddd;}</style>
</head>
<body><div class="container"><div class="content"><h1>固定布局示例</h1><p>This is a fixed width layout. The content width remains constant regardless of the screen size.</p></div></div>
</body>
</html>

​.container​​ 类设置了一个固定宽度的容器,无论屏幕的宽度如何,容器的宽度都保持在800px,这会导致在小屏幕设备上出现水平滚动条。

1.2 流动布局

流动布局使用相对单位(如百分比)来设置宽度。这种布局方式可以根据屏幕宽度自动调整内容的尺寸,从而适应不同的屏幕。

示例:流动布局
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>流动布局示例</title><style>.container {width: 80%;margin: 0 auto;padding: 20px;background-color: #f0f0f0;}.content {background-color: #ffffff;padding: 20px;border: 1px solid #ddd;}</style>
</head>
<body><div class="container"><div class="content"><h1>流动布局示例</h1><p>This is a fluid width layout. The container width adjusts according to the screen size.</p></div></div>
</body>
</html>

​.container​​ 类的宽度设置为80%,使其能够根据屏幕宽度自动调整。虽然这种布局在不同屏幕上表现得更好,但它仍然无法完全适应各种设备。


二、响应式设计

响应式设计旨在创建能够适应各种设备和屏幕尺寸的网页。它通过灵活的网格系统、媒体查询和其他技术来实现页面的自适应布局。

2.1 响应式设计的原则

响应式设计有几个核心原则:

  • 流式布局:使用相对单位(如百分比)来定义布局的宽度。
  • 弹性图片:图片和其他媒体内容应该根据容器的大小自动调整。
  • 媒体查询:通过媒体查询来应用不同的样式规则,以适应不同的屏幕尺寸和设备特性。

2.2 使用媒体查询

媒体查询是响应式设计的关键技术之一,它允许我们根据设备的特性(如屏幕宽度、分辨率等)应用不同的样式规则。通过媒体查询,我们可以为不同的设备和屏幕尺寸定义不同的CSS规则,从而实现更加灵活的布局。

示例:基本的媒体查询
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>媒体查询示例</title><style>.container {width: 80%;margin: 0 auto;padding: 20px;background-color: #f0f0f0;}.content {background-color: #ffffff;padding: 20px;border: 1px solid #ddd;}/* 媒体查询:屏幕宽度小于600px */@media (max-width: 600px) {.container {width: 100%;padding: 10px;}.content {padding: 10px;}}</style>
</head>
<body><div class="container"><div class="content"><h1>媒体查询示例</h1><p>This layout adjusts based on the screen size. On small screens, the container width is 100% and padding is reduced.</p></div></div>
</body>
</html>

媒体查询用于检测屏幕宽度是否小于600px,如果是,​​.container​​ 的宽度将变为100%,并且内边距将减少。这确保了在小屏幕设备上内容仍然可读。


三、灵活网格

灵活网格系统(也称为栅格系统)是响应式设计的核心组件之一。它允许我们通过定义网格的行和列来创建灵活的布局。

3.1 使用CSS网格布局

CSS网格布局是一种强大的布局工具,允许我们创建复杂的网格布局。通过定义网格的行和列,我们可以轻松地创建响应式布局。

示例:基本的CSS网格布局
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS网格布局示例</title><style>.container {display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;padding: 20px;background-color: #f0f0f0;}.item {background-color: #ffffff;padding: 20px;border: 1px solid #ddd;}/* 媒体查询:屏幕宽度小于800px */@media (max-width: 800px) {.container {grid-template-columns: repeat(2, 1fr);}}/* 媒体查询:屏幕宽度小于500px */@media (max-width: 500px) {.container {grid-template-columns: 1fr;}}</style>
</head>
<body><div class="container"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div><div class="item">Item 4</div><div class="item">Item 5</div></div>
</body>
</html>

​.container​​ 使用CSS网格布局创建了一个三列的网格,通过媒体查询,我们调整了网格的列数以适应不同的屏幕尺寸。当屏幕宽度小于800px时,列数变为2;当屏幕宽度小于500px时,列数变为1。


3.2 使用Flexbox布局

Flexbox是一种用于创建一维布局的CSS布局模型。它允许我们在水平或垂直方向上对元素进行灵活的排列和对齐。

示例:基本的Flexbox布局
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flexbox布局示例</title><style>.container {display: flex;flex-wrap: wrap;gap: 20px;padding: 20px;background-color: #f0f0f0;}.item {flex: 1 1 30%;background-color: #ffffff;padding: 20px;border: 1px solid #ddd;}/* 媒体查询:屏幕宽度小于600px */@media (max-width: 600px) {.item {flex: 1 1 100%;}}</style>
</head>
<body><div class="container"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div><div class="item">Item 4</div><div class="item">Item 5</div></div>
</body>
</html>

​.container​​ 使用Flexbox布局创建了一个流式的布局,​​.item​​ 元素在大屏幕上占据约30%的宽度,而在小屏幕上占据100%的宽度。通过 ​​flex-wrap​​ 属性,我们允许子元素换行,从而适应不同的屏幕尺寸。


四、现代布局技术

除了CSS网格布局和Flexbox,现代CSS布局技术还有许多其他有用的工具,如CSS多列布局和CSS变量。它们可以进一步增强响应式设计的灵活性。

4.1 CSS多列布局

CSS多列布局允许我们将内容分成多列,以适应不同的屏幕宽度。

示例:CSS多列布局
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS多列布局示例</title><style>.container {column-count: 3;column-gap: 20px;padding: 20px;background-color: #f0f0f0;}.item {background-color: #ffffff;padding: 20px;border: 1px solid #ddd;}/* 媒体查询:屏幕宽度小于800px */@media (max-width: 800px) {.container {column-count: 2;}}/* 媒体查询:屏幕宽度小于500px */@media (max-width: 500px) {.container {column-count: 1;}}</style>
</head>
<body><div class="container"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div><div class="item">Item 4</div><div class="item">Item 5</div></div>
</body>
</html>

​.container​​ 使用CSS多列布局将内容分成多列,通过媒体查询,我们根据屏幕宽度调整列数,以确保内容在各种设备上都能良好展示。


4.2 CSS变量

CSS变量(或自定义属性)允许我们在CSS中定义可重用的值,并在整个文档中使用它们。这在响应式设计中非常有用,因为我们可以根据不同的屏幕尺寸调整这些变量的值。

示例:使用CSS变量
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS变量示例</title><style>:root {--container-width: 80%;--padding: 20px;--bg-color: #f0f0f0;}.container {width: var(--container-width);margin: 0 auto;padding: var(--padding);background-color: var(--bg-color);}.content {background-color: #ffffff;padding: var(--padding);border: 1px solid #ddd;}/* 媒体查询:屏幕宽度小于600px */@media (max-width: 600px) {:root {--container-width: 100%;--padding: 10px;}}</style>
</head>
<body><div class="container"><div class="content"><h1>CSS变量示例</h1><p>This layout adjusts based on the screen size. CSS variables allow us to change values globally with media queries.</p></div></div>
</body>
</html>

我们使用CSS变量定义了一些全局值(如容器宽度和内边距),通过媒体查询,我们可以在不同的屏幕尺寸下调整这些变量的值,从而实现响应式布局。


五、响应式图像

响应式图像是响应式设计的重要组成部分。它们能够根据设备的屏幕尺寸和分辨率调整自身的尺寸,从而提高页面加载速度并改善用户体验。

5.1 使用​​max-width​​属性

使用 ​​max-width​​ 属性可以确保图像不会超出其容器的宽度,从而实现响应式效果。

示例:响应式图像
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>响应式图像示例</title><style>.container {width: 80%;margin: 0 auto;padding: 20px;background-color: #f0f0f0;}img {max-width: 100%;height: auto;}</style>
</head>
<body><div class="container"><img src="example.jpg" alt="示例图片"></div>
</body>
</html>

​img​​ 标签使用 ​​max-width: 100%;​​ 确保图像在其容器中自适应缩放,保持其宽度不超过容器的宽度,同时保持高度的自动调整。


5.2 使用​​srcset​​​和​​sizes​​属性

​srcset​​ 和 ​​sizes​​ 属性允许我们为不同的屏幕分辨率和屏幕尺寸提供不同的图像资源,以优化图像加载性能。

示例:使用​​srcset​​​和​​sizes​
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>响应式图像示例</title>
</head>
<body><div class="container"><img src="01.jpg" srcset="01.jpg 600w, example-medium.jpg 1200w, example-large.jpg 1800w" sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw" alt="示例图片"></div>
</body>
</html>

​srcset​​ 属性提供了不同分辨率的图像源,而 ​​sizes​​ 属性定义了在不同视口宽度下使用的图像尺寸。这样可以根据设备的屏幕特性选择合适的图像,从而优化加载性能和显示效果。


六、响应式排版

响应式排版确保文本在不同设备上可读且美观。这涉及到字体大小、行高和文本对齐等方面的调整。

6.1 使用相对单位

使用相对单位(如 ​​em​​ 和 ​​rem​​)来定义字体大小和行高可以使文本在不同屏幕尺寸下保持良好的可读性。

示例:响应式排版
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>响应式排版示例</title><style>body {font-size: 16px;line-height: 1.5;margin: 0;padding: 0;background-color: #f0f0f0;}h1 {font-size: 2rem;}p {font-size: 1rem;margin-bottom: 1em;}/* 媒体查询:屏幕宽度小于600px */@media (max-width: 600px) {body {font-size: 14px;}h1 {font-size: 1.5rem;}p {font-size: 0.875rem;}}</style>
</head>
<body><h1>响应式排版示例</h1><p>This text adjusts based on the screen size. Using relative units allows text to scale properly on different devices.</p>
</body>
</html>

​body​​ 元素使用了 ​​rem​​ 单位来定义字体大小,使其能够根据屏幕宽度进行调整。通过媒体查询,我们在小屏幕设备上减少了字体大小,以确保文本在不同设备上保持良好的可读性。


七、视口元标签

视口元标签用于控制网页在移动设备上的显示方式。它允许我们设置视口的宽度和缩放级别,从而确保页面在不同设备上能够正确渲染。

7.1 基本视口设置

设置视口宽度为设备宽度,可以确保页面在移动设备上按照预期显示。

示例:视口元标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>视口元标签示例</title>
</head>
<body><h1>视口元标签示例</h1><p>This page uses the viewport meta tag to control the layout on mobile devices. The content will be properly scaled and displayed on various screen sizes.</p>
</body>
</html>

视口元标签设置了 ​​width=device-width​​ 和 ​​initial-scale=1.0​​,确保页面在移动设备上使用设备宽度,并初始缩放级别为1。这是响应式设计的基本设置。


如有表述错误及欠缺之处敬请指正补充。


http://www.ppmy.cn/news/1527027.html

相关文章

鸡蛋检测系统源码分享

鸡蛋检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Vision …

MySQL中几种常见的行格式

在MySQL中&#xff0c;ROW_FORMAT 是用来指定表中行的存储格式的属性。不同的行格式会影响数据的存储方式&#xff0c;进而影响存储空间的使用效率和访问性能。ROW_FORMATCOMPACT 是其中一种行格式&#xff0c;表示“紧凑格式”。 以下是MySQL中几种常见的行格式&#xff1a; …

数据分析中:相关系数计算方法怎么选择合适?

选择合适的相关系数计算方法可以考虑以下几个方面&#xff1a; 一、数据类型 连续变量与连续变量&#xff1a; 皮尔逊相关系数&#xff1a;当两个连续变量之间呈线性关系&#xff0c;且数据满足正态分布假设时&#xff0c;皮尔逊相关系数是一个很好的选择。它衡量的是两个变量…

.NET 6.0 + WPF 使用 Prism 框架实现导航

合集 - .NET 基础知识(3) 1..NET 9 优化&#xff0c;抢先体验 C# 13 新特性08-202.《黑神话&#xff1a;悟空》神话再现&#xff0c;虚幻引擎与Unity/C#谁更强&#xff1f;08-21 3..NET 6.0 WPF 使用 Prism 框架实现导航09-11 收起 阅读目录 前言什么是Prism?安装 Prism使…

每日奇难怪题(持续更新)

1.以下程序输出结果是() int main() {int a 1, b 2, c 2, t;while (a < b < c) {t a;a b;b t;c--;}printf("%d %d %d", a, b, c); } 解析:a1 b2 c2 a<b 成立 ,等于一个真值1 1<2 执行循环体 t被赋值为1 a被赋值2 b赋值1 c-- c变成1 a<b 不成立…

物流系统中的嵌入式:STM32微控制器与智能算法驱动的物理循迹小车详细流程

一、项目概述 本项目旨在开发一款基于STM32微控制器的物理循迹小车&#xff0c;具备二维码识别能力&#xff0c;并能够将物品送到指定的物流位置。通过传感器和算法的结合&#xff0c;小车将实现自主导航和路径规划&#xff0c;从而提高物流效率和准确性。项目的目标是为智能物…

es6中set和map的区别

在ES6&#xff08;ECMAScript 2015&#xff09;中&#xff0c;Set 和 Map 是两种新的集合类型&#xff0c;它们提供了更高级的数据结构来存储唯一值或键值对集合。尽管它们在功能上有些相似&#xff0c;但它们在用途和内部机制上存在一些关键区别。 1. 基本概念 Set&#xff1…

前端框架大观:探索现代Web开发的基石

目录 引言 一、前端框架概述 二、主流前端框架介绍 2.1 React 2.1.1 简介 2.1.2 特点 2.1.3 代码示例 2.2 Vue.js 2.2.1 简介 2.2.2 特点 2.2.3 代码示例 2.3 Angular 2.3.1 简介 2.3.2 特点 2.3.3 代码示例 三、其他前端框架与库 四、前端框架的选择 五、结…

python install 出现443原因

解决办法&#xff1a; pycharm pycharm安装模块时一直提示443 超时问题_pytorch 443-CSDN博客 windows全局 Python代理模式下 解决 pip 安装第三方包时因 SSL 报错Caused by SSLError

Zookeeper工作机制、特点、数据结构、应用场景、配置参数解读

ZK工作机制 从涉及模式角度来理解&#xff1a;是一个基于观察者模式设计的分布式服务管理框架&#xff0c;负责存储和管理大家都关心的数据&#xff0c;然后接受观察者的注册&#xff0c;一旦这些数据的状态发生变化&#xff0c;zk就负责通知已在zk上注册的那些观察者做出相应…

【leetcode】树形结构习题

二叉树的前序遍历 返回结果&#xff1a;[‘1’, ‘2’, ‘4’, ‘5’, ‘3’, ‘6’, ‘7’] 144.二叉树的前序遍历 - 迭代算法 给你二叉树的根节点 root &#xff0c;返回它节点值的 前序 遍历。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,…

人工智能物联网:一项综述

这篇论文的标题是《Artificial Intelligence of Things: A Survey》&#xff0c;作者是 Shakhrul Iman Siam 等人&#xff0c;来自不同的大学和研究机构。论文提供了对人工智能物联网&#xff08;AIoT&#xff09;研究的系统性和全面性回顾。以下是论文的主要内容概述&#xff…

【C#生态园】提高C#开发效率和代码质量的利器:ORM库和数据库连接库

探秘C#数据库利器&#xff1a;全面解读6大库功能与用法 前言 在现代软件开发中&#xff0c;使用合适的库可以极大地提高开发效率和代码质量。针对不同的数据库操作需求&#xff0c;C#开发者常常会选择不同的ORM库和数据库连接库来满足其需求。本文将介绍一些用于C#的主流ORM库…

Win11+Ubuntu20.04双系统安装教程(避坑版)

Win11Ubuntu20.04双系统安装教程&#xff08;避坑版&#xff09; 前言系统盘制作安装Rufus系统盘制作 Windows磁盘配置移动分区&#xff08;磁盘分区时出现不连续的未分配空间需要用到&#xff0c;如果是连续的未分配空间即无需操作&#xff09;安装分区助手移动分区 安装Ubunt…

adb devices不显示连接设备怎么解决

adb devices不显示设备&#xff0c;首先用老办法检查。假如是显示adb这个命令不认识&#xff0c;那就是系统路径问题。假如能认识adb这个命令&#xff0c;那就检查一下手机有没有开usb调试。 但是我遇到了更奇怪的问题&#xff1a;我把网上的攻略都试了一遍&#xff0c;设备驱…

SVM——支持向量机的学习入门

1、推荐文章 1、一文看懂SVM算法 2、图解机器学习|支持向量机模型详解 3、支持向量机的直观理解 2、分类问题 假设你的大学开设了一门机器学习&#xff08;ML&#xff09;课程。课程导师发现数学或统计学好的学生表现最佳。随着时间的推移&#xff0c;积累了一些数据&…

SAP系统使用BRTOOLS的系统COPY

SAP系统使用BRTOOLS的系统COPY 今天偶然翻到的,这个是在之前的公司自己兼职basis摸索的,速度比较快,比标准的system copy好用很多。使用的是SAP系统的BRTOOLS,每次都是成功的,那个NAS有的就是LINUX的一些基本操作,基本都是一样的。 1、ERPRD1服务器使用DB13每天备份到指…

开源 AI 智能名片 S2B2C 商城小程序相关角色的探索

摘要&#xff1a;本文围绕开源 AI 智能名片 S2B2C 商城小程序的决策产品方向&#xff0c;基于两个原则展开研究。原则一是根据该产品方向尽可能多地寻找相关角色&#xff0c;原则二是以探索痛点而非销售为核心。同时确保识别出的角色覆盖价值使用者、价值传递者与价值生产者三类…

基于STM32单片机的LED灯闪烁仿真(库函数版本)

注意事项&#xff1a;STM32仿真会存在各种各样BUG&#xff0c;且尽量按照同样仿真版本使用。本专栏所有的仿真都采用PROTEUS8.15。 本文已经配置好STM32F103C8T6系列&#xff0c;在PROTUES仿真里&#xff0c;32单片机一般只用一种型号&#xff0c;如需其他型号&#xff0c;可改…

精选评测!分享5款AI写论文最好用的软件排名

写作是一项既费时又费力的任务&#xff0c;尤其是对于科研人员来说&#xff0c;撰写论文更是一项必不可少的挑战。幸运的是&#xff0c;现在有多款免费的AI写作工具可以大大简化这一过程。小编精心挑选了5款免费的AI写作工具&#xff0c;旨在帮助大家提高写作效率&#xff0c;让…