我發現(最小寬度/最大寬度)媒體查詢的概念有些混亂。

自然，如果我要設計媒體查詢，我想說(用偽代碼)。

if(screen.width < 420)

{

ApplyStyle();

}

談論min和max的概念沒有任何意義，因為div元素之類的"最小寬度"是命令而不是問題。

我知道以下內容適用于我的屏幕低于420px的情況...

@media screen and (max-width:420px) {

}

我只是不知道為什么，因為我告訴它最大寬度。 如果我告訴它有東西，為什么CSS檢查它？ 當然，它已經知道了。

我可能在這里缺少語法/上下文。 有人可以解釋一下嗎？

我完全贊成你。 作為程序員，if(screen.width < 420)使SOOOO更加有意義，并且可以立即理解。

媒體查詢中的min-width與您在元素上設置的min-width屬性無關，這是兩件事。

在媒體查詢中，如果視口的寬度大于或等于X，則min-width: X為true，有效用作screen.width >= X。顯然max-width將等于screen.width <= X

對我來說，這很有意義，如果您將@media screen and (max-width:420px)讀為最大寬度為420px的屏幕，那么0到420px之間的任何值

我不得不回到這個問題上，并且意識到您的答案實際上是正確的答案。 最后一句話為我釘上了釘子。 謝謝！

是的，對不起，我只是迷失了所有原始內容，然后在這里的最后一句話中磨練了一下。 我希望沒有難過的感覺！

這是一個簡單的示例，希望對您有所幫助。

假設我們有一個包含以下媒體查詢的網站：

/* #1- Large desktop */

@media (min-width: 980px) { ... }

/* #2- Portrait tablet to landscape and desktop */

@media (min-width: 768px) and (max-width: 979px) { ... }

/* #3- Landscape phone to portrait tablet */

@media (max-width: 767px) { ... }

/* #4- Landscape phones and down */

@media (max-width: 480px) { ... }

如果瀏覽器的屏幕尺寸為1200px，則查詢＃1將得到滿足，因為要顯示此查詢，瀏覽器的最小寬度必須為980px。

可以說我們現在調整瀏覽器的大小，并將其一直縮小到250px。由于最大為480px，所以滿足了查詢4。

這是查詢的簡單翻譯。

@media (min-width: 980px) { ... }

如果屏幕大于或等于980px，則顯示

@media (min-width: 768px) and (max-width: 979px) { ... }

如果屏幕大于或等于768px且小于或等于978px，則顯示

@media (max-width: 767px) { ... }

如果屏幕大于480像素且小于或等于767像素，則顯示。

@media (max-width: 480px) { ... }

如果屏幕小于或等于480像素，則顯示

使用這些查詢，您將始終得到結果，因為始終可以滿足一個查詢。

這里的困惑在于，同時存在一個min-width CSS屬性和具有相同名稱的媒體查詢：

@media (min-width: 420px) {...} /* This is read-only and is set to screen size */

.element { min-width: 420px; ...} /* This is setting a property of the selected element */

總結

以上是生活随笔為你收集整理的css设置最小宽度消失,关于CSS：最小/最大宽度媒体查询没有语法意义的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。