CSS Media Queries不閱讀自定義內容？

Question

我正在創建自定義網格，如果屏幕尺寸很大，我想顯示4列，如果最小屏幕尺寸是50px，最大屏幕尺寸是400px，則要顯示2列。 我寫了媒體查詢，但是沒有用。 以下是我的代碼：

 .CustomGridHeader { width: 100%; } .Grid { width: 50%; float: left; } .item { width: 50%; float: left; border: 1px solid; } @media (min-width: 50px) and (max-width: 300px) { .Grid { width: 100%; float: none; } } 

 <div class="CustomGridHeader"> <div class="Grid"> <div class="item"> Item 1 </div> <div class="item"> Item 2 </div> </div> <div class="Grid"> <div class="item"> Item 3 </div> <div class="item"> Item 4 </div> </div> </div> 

我究竟做錯了什么？

Answer 1

解決方案是

 .CustomGridHeader { width: 100%; } @media (min-width:300px){ .Grid{ width:50%; float:left; } .item { width:50%; float:left; /*border:1px solid black;*/ } } @media (min-width:50px) and (max-width:300px) { .Grid { width: 100%; float: none; } .item { width:50%; float:left; /*border:1px solid black;*/ } } 

 <div class="CustomGridHeader"> <div class="Grid"> <div class="item"> Item 1 </div> <div class="item"> Item 2 </div> </div> <div class="Grid"> <div class="item"> Item 3 </div> <div class="item"> Item 4 </div> </div> </div> 

更新問題后更新答案，從類項目中刪除1px邊框，如果要添加邊框元素，則從100％上額外減去1px，則必須根據邊框寬度減小類項目的寬度

您可以通過調整工作窗口的大小來檢查

謝謝

Answer 2

我寧願建議您使用Flexbox解決方案，該解決方案所需的代碼要少得多：

 .CustomGridHeader, .Grid {display: flex} /* displays flex-items (children) inline */ .Grid, .item {flex: 1} /* stretches them so they take full and equal width */ .item {border: 1px solid} @media (max-width: 400px) { .CustomGridHeader {flex-direction: column} /* stacks them vertically */ } 

 <div class="CustomGridHeader"> <div class="Grid"> <div class="item"> Item 1 </div> <div class="item"> Item 2 </div> </div> <div class="Grid"> <div class="item"> Item 3 </div> <div class="item"> Item 4 </div> </div> </div>