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

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


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

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

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.rhkb.cn/news/425120.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL练手题--体育馆的人流量(困难)

一、准备工作 Create table If Not Exists Stadium (id int, visit_date DATE NULL, people int); Truncate table Stadium; insert into Stadium (id, visit_date, people) values (1, 2017-01-01, 10); insert into Stadium (id, visit_date, people) values (2, 2017-01-02…

MouseArea元素

常用信号 onClicked&#xff0c;鼠标点击onPressed&#xff0c;鼠标按下onReleased&#xff0c;鼠标释放 import QtQuickWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")Rectangle{id:rectwidth: 100height: 100color:"red"MouseA…

视频监控平台是如何运作的?EasyCVR视频汇聚平台的高效策略与实践

随着科技的飞速发展&#xff0c;视频监控平台在社会安全、企业管理、智慧城市构建等领域发挥着越来越重要的作用。一个高效的视频监控平台&#xff0c;不仅依赖于先进的硬件设备&#xff0c;更离不开强大的视频处理技术作为支撑。这些平台集成了多种先进的视频技术&#xff0c;…

Redis集群_cluster

cluster集群 cluster翻译就是集群&#xff0c;所以cluster集群也叫做redis集群相比于哨兵模式&#xff0c;cluster集群能支持扩容&#xff0c;并且无需额外的节点来监控状态&#xff0c;所以使用这种模式集群的系统会用的更多些redis cluster采用的是去中心化网络拓扑架构&…

git push : RPC failed; HTTP 400 curl 22 The requested URL returned error: 400

git push 出现RPC failed; HTTP 400 curl 22 The requested URL returned error: 400 问题 git push Enumerating objects: 11, done. Counting objects: 100% (11/11), done. Delta compression using up to 8 threads Compressing objects: 100% (10/10), done. error: RPC …

漫画元素检测系统源码分享

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

【开源分享】vsomeip 安装、编译、运行步骤笔记

文章目录 1. 摘要2. 安装、编译2.1 开发环境说明2.2 安装依赖2.3 获取代码2.4 编译代码2.5 安装 3. 测试验证参考 1. 摘要 本文主要描述 vsomeip 的安装、编译与运行步骤。下载源码&#xff0c;安装必要依赖&#xff0c;如Boost和CMake。通过CMake配置编译 vsomeip 库&#xf…

【C++】unordered系列

前言&#xff1a; 在C11及以后的标准中&#xff0c;unordered容器是标准模板库&#xff08;STL&#xff09;的一部分&#xff0c;提供了高效的数据结构选项&#xff0c;适用于需要快速查找和插入操作的场景。 unordered通常与关联容器一起使用&#xff0c;特别是unordered_map和…

详解HTTP/HTTPS协议

HTTP HTTP协议全名为超文本传输协议。HTTP协议是应用层协议&#xff0c;其传输层协议采用TCP协议。 请求—响应模型 HTTP协议采用请求-响应模型&#xff0c;通常由客户端发起请求由服务端完成响应。资源存储在服务端&#xff0c;客户端通过请求服务端获取资源。 认识URL 当…

01,大数据总结,zookeeper

1 &#xff0c;zookeeper &#xff1a;概述 1.1&#xff0c;zookeeper&#xff1a;作用 1 &#xff0c;大数据领域 &#xff1a;存储配置数据   例如&#xff1a;hadoop 的 ha 配置信息&#xff0c;hbase 的配置信息&#xff0c;都存储在 zookeeper 2 &#xff0c;应用领…

TDengine 与飞腾腾锐 D2000 完成兼容互认证,推动国产软硬件深度融合

在国家信息安全和自主可控技术日益受到重视的背景下&#xff0c;国产软硬件的发展已成为推动数字经济的重要力量。随着全球科技竞争加剧&#xff0c;企业在选择技术解决方案时&#xff0c;越来越倾向于采用国产产品以降低对外部技术的依赖。这一趋势不仅是为了确保数据安全与隐…

信息安全数学基础(14)欧拉函数

前言 在信息安全数学基础中&#xff0c;欧拉函数&#xff08;Eulers Totient Function&#xff09;是一个非常重要的概念&#xff0c;它与模运算、剩余类、简化剩余系以及密码学中的许多应用紧密相关。欧拉函数用符号 φ(n) 表示&#xff0c;其中 n 是一个正整数。 一、定义 欧…

模拟视频推到WVP推流列表

效果 1. wvp创建RTMP 2. 使用ffmpeg将本地的视频转为rtmp ffmpeg -re -i F:rtsp\123.mp4 -c copy -f flv rtmp://192.168.1.237:1935/cd/10001?sign=Z4Y3eYeSg

标准库标头 <bit>(C++20)学习

<bit>头文件是数值库的一部分。定义用于访问、操作和处理各个位和位序列的函数。例如&#xff0c;有函数可以旋转位、查找连续集或已清除位的数量、查看某个数是否为 2 的整数幂、查找表示数字的最小位数等。 类型 endian (C20) 指示标量类型的端序 (枚举) 函数 bit_ca…

Android权限适配

Android权限适配 动态权限 背景 从Android6.0版本开始google将权限分为普通权限和特殊权限&#xff0c;app必须在AndroidManifest.xml添加引用权限的语句。 在安装apk时安卓会将普通权限授予该app&#xff0c;但特殊权限需要运行时申请。 安卓按照权限类别分为权限组和权限…

【第36章】Spring Cloud之Seata分布式事务

文章目录 前言一、架构图1. 介绍2. 项目结构3. 功能描述 二、用例1. 准备1.1 系统表1.2 业务表1.3 初始化数据 2. 项目搭建2.1 项目结构2.2 主要依赖2.3 主要配置 三、主要业务代码1. 仓储服务1.1 controller1.2 service1.3 dao 2. 订单服务1.1 controller1.2 service1.3 dao 3…

Mac清理其他文件:释放存储空间的高效指南

每个Mac用户都可能遇到存储空间不足的问题&#xff0c;尤其是当“其他”文件积累到一定体积时。在Mac上&#xff0c;“其他”文件通常包括各种系统文件、缓存、文档以及不被归类为应用程序、照片、电影或音乐的其他类型的文件。这些文件往往不易被注意&#xff0c;但逐渐占用了…

【笔记】CCF直播:《如何在国际会议上有效交流》(2024-9-15)

目录 一、提问的勇气二、提问什么三、其他主题的报告为什么听四、会议前怎么读大量论文&#xff1f;五、workshop为什么参加&#xff1f;Poster环节&#xff1f;六、提问环节七、其他 今天听了《如何在国际会议上有效交流》的直播讲座&#xff0c;记录一些笔记。 一、提问的勇…

我又做了一个国标GB28181设备模拟器的Windows版本,让国标28181开发更简单,不用再费劲弄个摄像机来调试国标GB28181开发了

之前我搞过一个《EasyGBD国标GB28181设备端模拟器帮助测试国标GB28181平台&#xff08;EasyGBD-&#xff1e;EasyGBS&#xff09;》&#xff0c;当时&#xff0c;主要是在安卓手机上&#xff0c;用摄像机的本地摄像头来做为视频源、用摄像机的麦克风做为音频源&#xff0c;对外…

微服务网关终极进化:设计模式驱动的性能与可用性优化(四)

时间&#xff1a;2024年09月12日 作者&#xff1a;小蒋聊技术 邮箱&#xff1a;wei_wei10163.com 微信&#xff1a;wei_wei10 希望大家帮个忙&#xff01;如果大家有工作机会&#xff0c;希望帮小蒋推荐一下&#xff0c;小蒋希望遇到一个认真做事的团队&#xff0c;一起努力…