嘗試學習 flex 的新手。根據谷歌檢查工具，我試圖在所有設備上都做出這種回應，而在其他設備上卻遺漏了一些。遵循我看到的一篇帖子的建議，它讓我走到了這一步。附上我的 html 和 css。我已經嘗試了 flex xxx 的不同組合，但到目前為止在我的筆記本電腦螢屏上看起來還不錯。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="header">
<h1>Sci-Fi Blog</h1>
<h3>dedicated to the Star Trek series</h3>
<div class="menu">
<ul>
<li>About</li>
<li>Resources</li>
<li>Other Sci-Fi series</li>
</ul>
</div>
</div>
<div class="container1">
<div class="row1">
<div class="STtos">
<h2>Star Trek TOS</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSTPdHkIFqZgTABvQtjcCnKr6mbWNfKBVDRRw&usqp=CAU" alt = "Pic of space ship">
<p>Turpis egestas pretium aenean pharetra magna. Tristique risus nec feugiat in fermentum posuere urna. In nibh mauris cursus mattis molestie a. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam. Sed pulvinar proin gravida hendrerit lectus a. In dictum non consectetur a erat nam. </p><a href="#"> <button>Read More</button></a> <a href="#"><button>Comment</button></a>
</div> <!--div STtos-->
<div class="STTNG">
<h2>Star Trek TNG</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQueIPqKDTgGH9_SaYzT7u9cfpvKs2P48l5dg&usqp=CAU" alt="pic of space ship">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. </p><a href="#"><button>Read More</button></a> <a href="#"><button>Comment</button></a>
</div> <!--end of STTNG-->
<div class="DS9">
<h2>Deep Space Nine</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKvwoJTvGIl2Nq2RzDKkf7OrgfVoHwrXP82A&usqp=CAU" alt="pic">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. </p><a href="#"><button>Read More</button></a> <a href="#"><button>Comment</button></a>
</div> <!--DS9 -->
</div> <!--row1 -->
</div> <!--container1-->
<div class="container2">
<div class="row2">
<div class="StarTrekTAS">
<h2>Star Trek TAS</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwdlJfrFrcj7KJRdTADDtsfjGa0SQweeu0fQ&usqp=CAU" width="259" height="194" alt="pic">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. </p><a href="#"><button>Read More</button></a> <a href="#"><button>Comment</button></a>
</div> <!--end of TAS-->
<div class="voyager">
<h2>Voyager</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRiV6QTXDR7lD9uvx8S-IuTClS-CV6COgSh1g&usqp=CAU" width="259" height="194" alt="pic">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus ut faucibus pulvinar elementum integer. </p><a href="#"><button>Read More</button></a> <a href="#"><button>Comment</button></a>
</div> <!--end of Voyager-->
<div class="Enterprise">
<h2>Enterprise</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTa4Iz2D0_InBOZg4Wi_PWAT-1lEqxI0AExPg&usqp=CAU" width="259" height="194" alt="pic">
<p>Turpis egestas pretium aenean pharetra magna. Tristique risus nec feugiat in fermentum posuere urna. In nibh mauris cursus mattis molestie a. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam. Sed pulvinar proin gravida hendrerit lectus a. In dictum non consectetur a erat nam. </p><a href="#"><button>Read More</button></a> <a href="#"><button>Comment</button></a>
</div>
</div> <!--end of row2-->
</div> <!--end of container2-->
</body>
</html>
body {
margin: 0;
padding:0;
box-sizing:border-box;
}
.header {
background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQSzBDemswC2Gg3mbDR7t8mQ53jByPChDtA5w&usqp=CAU');
text-align:center;
background-size:no repeat;
background-size:cover;
height:310px;
color:white;
margin-bottom: 150px;
margin-left: 5px;
margin-right:5px;
}
.header h1 {
margin:0;
}
li {
list-style-type:none;
display:inline-block;
padding: 10px;
}
.menu ul {
text-align:center;
display:inline-block;
padding: 0px;
background: rgba(197, 228, 183, 0.8);
}
.menu {
display: inline-block;
margin-left: 10px;
}
p a {
display:inline;
}
@media screen and (min-width:640px) {
.row1 {
display:flex;
justify-content:space-evenly;
grid-gap:10px;
}
.STtos {
flex: 0;
}
.STTNG {
flex:0;
}
.DS9 {
flex:0;
}
.row2 {
display:flex;
justify-content:space-evenly;
grid-gap:10px;
}
.StarTrekTAS {
flex: 0 0;
}
.voyager {
flex:0 0;
}
.Enterprise {
flex:0 0;
}
}
uj5u.com熱心網友回復：
我們經常談論回應性，好像它是一個二元條件（好像是或不是），但實際上有很多方法可以讓您的網站適應不同的螢屏解析度或設備類別。
目前，如果我們忽略您的標題/選單（似乎與問題無關），您的站點將包含 6 塊相似型別的內容。您已將它們包裝在 2.row秒內，每個包含 3 個，我懷疑這是一個錯誤（稍后會詳細介紹），但如果您通過筆記本電腦瀏覽器的鏡頭查看該站點，則是有道理的。
當站點并排顯示所有 3 個專案時，它在全尺寸臺式機（我猜包括您的筆記本電腦）上看起來很棒，因為@media { ... }您的 CSS 中的塊有效。該塊內的樣式啟用了 flexbox 并使其看起來或多或少像您想象的那樣。但是，當您縮小站點時，超出您的（唯一）@media { ... }塊的截止點時，該塊中的所有樣式都將被停用，并且瀏覽器會退回到渲染它們，就好像您根本沒有 CSS 一樣。現在，對于手機來說，這種默認樣式實際上并不算太糟糕，但這并不是大多數設計師（包括您）可能想要的。
可能的預期結果（我懷疑）是您的網站現在看起來或多或少像它在桌面上的樣子（2 行 3 列），但是一旦螢屏變小，它應該回應地變成 2 列，最后變成 1-列布局。
主要問題在于 CSS，而不是將所有樣式都放在一個@media { ... }塊中并像電燈開關一樣打開/關閉它，您希望大多數樣式都是通用的，然后在塊中使用最少的特定樣式@media { ... }不同的情況。
讓我們先解決大部分問題，然后重新創建它們；讓我們洗掉以下行，以及CSS 中的所有內容：
@media screen and (min-width:640px) {
接下來，我們將查看 HTML。雖然不是嚴格錯誤的人；4 個名稱container1, container2,row1和row2作為class名稱不是很有用。ids 用于唯一命名事物，類用于標記與其他事物相似的事物。后一種情況現在對我們來說很重要。
讓我們將兩個容器類更改為 justcontainer并將 2 行更改為 just row（例如：洗掉數字）。接下來，這 6 個 startrek <div>s 都有唯一的類名（如），將這 6 個更改為ids（如id="STtos"）并分配所有 6 個<div>sa 共享類（因此現在它們看起來像：）<div id="STtos" >。
現在，HTML 中還有一個問題，但我們稍后會回到這個問題，現在讓我們重新創建一些 CSS。
我們希望.rows 是 flexboxes（包含.contentitems）：
.row {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
}
然后是 6 .contentitems 本身，為了簡單起見，讓我們將每個定義為需要 200 像素的寬度，當有足夠的空間時不允許它們增長（第一個0），也不允許它們在空間很小時縮小（第二個0）：
.contentitem {
flex: 0 0 200px;
}
現在在您的筆記本電腦上進行測驗，這應該與之前的 3 列幾乎相同。現在將螢屏縮小到非常低的寬度 -> 它只會縮小wrap到 1 列。現在縮小一點，使其wrap變為 2 列。
在這里，您將看到我之前忽略的最后一個問題的影響。您已將您的內容包裝成 2.row秒，因為您在創建它時將 3 個專案并排放置。.row在這種情況下根本沒有理由有多個s。
在 HTML 源代碼中，就在上面<div id="StarTrekTAS">，讓我們洗掉這 4 行：
</div>
</div>
<div class="container">
<div class="row">
現在您的內容完全動態地適應螢屏尺寸，如果螢屏足夠寬，您甚至可以并排放置所有 6 個（或 5 個、4 個或……）。同樣沒有手動.row拆分，當您并排縮小到 2 列的正確寬度時，它實際上是 3 行 2，而不是 4 行，其中 2 行是半空的。
在所有這些更改之后的整個事情（以及<style>為我自己移動的 CSS ）：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/* untouched css */
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQSzBDemswC2Gg3mbDR7t8mQ53jByPChDtA5w&usqp=CAU');
text-align: center;
background-size: no repeat;
background-size: cover;
height: 310px;
color: white;
margin-bottom: 150px;
margin-left: 5px;
margin-right: 5px;
}
.header h1 {
margin: 0;
}
li {
list-style-type: none;
display: inline-block;
padding: 10px;
}
.menu ul {
text-align: center;
display: inline-block;
padding: 0px;
background: rgba(197, 228, 183, 0.8);
}
.menu {
display: inline-block;
margin-left: 10px;
}
p a {
display: inline;
}
/* the css under here is changed */
.row {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
}
.contentitem {
flex: 0 0 200px;
}
</style>
</head>
<body>
<div class="header">
<h1>Sci-Fi Blog</h1>
<h3>dedicated to the Star Trek series</h3>
<div class="menu">
<ul>
<li>About</li>
<li>Resources</li>
<li>Other Sci-Fi series</li>
</ul>
</div>
</div>
<div class="container">
<div class="row">
<div class="contentitem" id="STtos">
<h2>Star Trek TOS</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSTPdHkIFqZgTABvQtjcCnKr6mbWNfKBVDRRw&usqp=CAU"
alt="Pic of space ship">
<p>Turpis egestas pretium aenean pharetra magna. Tristique risus nec feugiat in fermentum posuere urna.
In nibh mauris cursus mattis molestie a. Venenatis urna cursus eget nunc scelerisque viverra mauris
in aliquam. Sed pulvinar proin gravida hendrerit lectus a. In dictum non consectetur a erat nam.
</p>
<a href="#"> <button>Read More</button></a>
<a href="#"><button>Comment</button></a>
</div>
<!--div STtos-->
<div class="contentitem" id="STTNG">
<h2>Star Trek TNG</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQueIPqKDTgGH9_SaYzT7u9cfpvKs2P48l5dg&usqp=CAU"
alt="pic of space ship">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu
tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis
eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra
adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus
ut faucibus pulvinar elementum integer. </p>
<a href="#"><button>Read More</button></a>
<a href="#"><button>Comment</button></a>
</div>
<!--end of STTNG-->
<div class="contentitem" id="DS9">
<h2>Deep Space Nine</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKvwoJTvGIl2Nq2RzDKkf7OrgfVoHwrXP82A&usqp=CAU"
alt="pic">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu
tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis
eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra
adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus
ut faucibus pulvinar elementum integer. </p>
<a href="#"><button>Read More</button></a>
<a href="#"><button>Comment</button></a>
</div>
<!--DS9 -->
<div class="contentitem" id="StarTrekTAS">
<h2>Star Trek TAS</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwdlJfrFrcj7KJRdTADDtsfjGa0SQweeu0fQ&usqp=CAU"
width="259" height="194" alt="pic">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu
tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis
eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra
adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus
ut faucibus pulvinar elementum integer. </p>
<a href="#"><button>Read More</button></a>
<a href="#"><button>Comment</button></a>
</div>
<!--end of TAS-->
<div class="contentitem" id="voyager">
<h2>Voyager</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRiV6QTXDR7lD9uvx8S-IuTClS-CV6COgSh1g&usqp=CAU"
width="259" height="194" alt="pic">
<p>Mauris ultrices eros in cursus. At imperdiet dui accumsan sit amet nulla facilisi. Pellentesque eu
tincidunt tortor aliquam nulla facilisi cras. Sem integer vitae justo eget magna fermentum iaculis
eu non. Faucibus vitae aliquet nec ullamcorper. Convallis aenean et tortor at risus viverra
adipiscing at in. Fermentum dui faucibus in ornare quam viverra orci. Sagittis id consectetur purus
ut faucibus pulvinar elementum integer. </p>
<a href="#"><button>Read More</button></a>
<a href="#"><button>Comment</button></a>
</div>
<!--end of Voyager-->
<div class="contentitem" id="Enterprise">
<h2>Enterprise</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTa4Iz2D0_InBOZg4Wi_PWAT-1lEqxI0AExPg&usqp=CAU"
width="259" height="194" alt="pic">
<p>Turpis egestas pretium aenean pharetra magna. Tristique risus nec feugiat in fermentum posuere urna.
In nibh mauris cursus mattis molestie a. Venenatis urna cursus eget nunc scelerisque viverra mauris
in aliquam. Sed pulvinar proin gravida hendrerit lectus a. In dictum non consectetur a erat nam.
</p>
<a href="#"><button>Read More</button></a>
<a href="#"><button>Comment</button></a>
</div>
<!--end of Enterprise-->
</div>
</div>
</body>
</html>
Now, if you actually wanted to bring media queries back in, to make some other more explicit changes between the different resolutions, then you could (for example) add this to your CSS, below all your other styles:
@media screen {
/* (S) what you write in here, applies to any resolution (Small, Medium and Large) */
}
@media screen and (min-width:590px) {
/* (M) what you write in here, only applies to 590px or wider (Medium and Large screens) */
}
@media screen and (min-width:1000px) {
/* (L) applies to 1000px or wider (Large screens only) */
}
There are 2 things to note here:
- I have basically chosen to recognize 3 different screen sizes (small/medium/large) with the cut-off points between them being 590px and 1000px (which are just arbitrary example numbers).
- The 3 different
@mediablocks are not specific to small/medium/large, each affects its bigger variants as well. So the 3@mediablocks should perhaps be labeled as the SML, ML and L blocks.
如果您只想將一些背景顏色更改為黃色，僅適用于最小的 ( S ) 螢屏，那么您應該：
- 將
background-color: yellow;在小號塊 - 把
background-color: white;在中號塊，防止中號和大號尺寸螢屏從受著黃色。
或者更具體到您的網站，如果您不想并排顯示超過 3 個內容項，您可以將其添加到大 ( L ) 塊中：
.contentitem {
flex-basis: 30%;
}
這將覆寫200px我們之前（在flex屬性中）定義的30%。
uj5u.com熱心網友回復：
如果您想讓您的 div 具有回應性，即在 PC 上的行方向和移動設備的列中。你首先必須定義display: flex父DIV，使所有在它里面的div會安排行序列和內@media查詢只需要添加一個更多的財產flex-direction: column，這將改變默認值flex-direction是row到column。
w3schools 的這個鏈接可能會有所幫助
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/393862.html