数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学使用 CSS 根据屏幕尺寸更改布局
为了根据屏幕尺寸在 CSS 中更改布局，我们将创建一个父 div 并将其他子 div 包裹在其中。使用 媒体查询，屏幕尺寸的布局将发生变化。当您需要为不同的设备（例如平板电脑、手机、台式机等）设置样式时，可以使用媒体查询。
在这篇文章中，我们有四个宽度相同的盒子，我们的任务是使用 CSS 根据屏幕尺寸更改布局。
根据屏幕尺寸更改布局的步骤
我们将遵循以下步骤来使用 CSS 根据屏幕尺寸更改布局。
- 我们创建了四个宽度相同的 div 盒子，并将它们包装在一个名为 container 的父 div 中。
- 然后，我们使用了 col 类，它设置了所有四个盒子的 宽度、填充 和文本 颜色。CSS float 属性将四个盒子左对齐，并将其并排放置在一行中。
- 然后，我们使用 background-color 属性来设置每个盒子的不同颜色。
- 我们使用 :after 伪元素来清除浮动，并使父 div 的行为类似于表格，该表格包含浮动子元素，允许父 div 正确扩展。
- 我们使用 **媒体查询** 来根据屏幕尺寸更改布局。如果屏幕尺寸小于 900px，则盒子的宽度将从 25% 变为 50%。当屏幕尺寸小于 600px 时，盒子的宽度将从 50% 变为 100%。
示例
这是一个完整的示例代码，它实现了上述步骤，以使用 CSS 根据屏幕尺寸更改布局。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
* {
box-sizing: border-box;
}
.col {
color: white;
float: left;
width: 25%;
padding: 10px;
}
.col1 {
background-color: rgb(153, 29, 224);
}
.col2 {
background-color: rgb(12, 126, 120);
}
.col3 {
background-color: rgb(207, 41, 91);
}
.col4 {
background-color: rgb(204, 91, 39);
}
.container:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 900px) {
.col {
width: 50%;
}
}
@media screen and (max-width: 600px) {
.col {
width: 100%;
}
}
</style>
</head>
<body>
<h3>
Changing Layouts Based on Screen Size
using CSS
</h3>
<p>
Resize the screen to see the below divs
resize themselves.
</p>
<div class="container">
<div class="col col1">
<h2>First box</h2>
</div>
<div class="col col2">
<h2>Second box</h2>
</div>
<div class="col col3">
<h2>Third box</h2>
</div>
<div class="col col4">
<h2>Fourth box</h2>
</div>
</div>
</body>
</html>
结论
在这篇文章中，我们了解了如何使用 CSS 媒体查询根据屏幕尺寸更改布局。我们创建了四个盒子，并根据屏幕尺寸将它们的宽度从 25% 调整到 50%，然后调整到 100%。
更新于：2024年9月25日
14K+ 次浏览
广告