資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
廣告