為什么我的媒體查詢不適用於大分辨率？
[英]Why is my media query not working for big resolution?
問題描述
我想編寫一個 web，它在 PC 中有 3 列，在智能手機中有單列。 問題是我的媒體查詢中的 class“項目”似乎不起作用。 不知何故，即使我使用 PC，主要“項目”也始終有效，顯示兩列而不是三列。 這是 HTML 代碼：
.container { display: flex; flex-wrap: wrap; justify-content: space-between; }.item { margin-left: 32px; margin-right: 32px; margin-bottom: 32px; width: 311px; height: 200px; left: 565px; top: 624px; background: #C15D5D; box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.2); border-radius: 20px; }.item.green { background-color: #71B083; }.item.yellow { background-color: #D2BB68; } @media (min-width: 1281px) {.item { border-style: solid; flex: 0 32%; height: 100px; margin-bottom: 2%; /* (100-32*3)/2 */ width: 311px; height: 200px; left: 565px; top: 624px; background: #C15D5D; box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.2); border-radius: 20px; }.item.green { background-color: #71B083; left: 212px; }.item.yellow { background-color: #D2BB68; left: 918px; } }
<body> <div class="container"> <div class="item green">1</div> <div class="item">2</div> <div class="item yellow">3</div> <div class="item green">4</div> <div class="item">5</div> <div class="item yellow">6</div> <div class="item green">7</div> <div class="item">8</div> <div class="item yellow">9</div> </div> </body>
1 個解決方案
解決方案1
1 2020-11-11 21:37:55
元素的寬度為 32%。 每邊的邊距為 32px；
要並排放置三個元素，您需要在剩余的 4% 空間中留出 192px 的邊距。
為此，容器的內容寬度需要為 4608 像素，因此 window 需要比 1281 像素寬得多。
Why my @media query isn't showing and it seems to not working?
[英]Why my @media query isn't showing and it seems to not working?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.