为什么我的媒体查询不适用于大分辨率？
[英]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.