最大寬度與最小寬度

Question

我正在閱讀的大多數關於使用媒體查詢的教程都在演示min-width的使用，但我很少看到人們使用max-width 。

這是某種設計趨勢或模式，為什么人們使用min-width不是max-width ？

例如，我正在設計一個從移動設備到桌面設備的網站。 我正在使用 Foundation 4，但使用媒體查詢刪除頁面上的各種元素並重新定位源順序。

我面臨的一件事是任何寬度為 360 像素或更小的設備的自定義導航。 我希望他們有一個垂直導航，而不是一個內聯水平。 所以我的想法是使用max-width來定位這些設備。

如果我首先設計移動設備，我應該使用min-width嗎？ 即所有默認樣式都是針對移動設備的，因此使用min-width來逐步增強布局？

Answer 1

2 部分答案

第 1 部分：回答“為什么人們使用最小寬度而不是最大寬度？”：

它與設計流程有關。 通常，使用最小寬度模式，您正在設計移動優先。 使用最大寬度模式，您可以設計桌面優先。

使用 min-width 移動優先，默認樣式是移動樣式。 之后的查詢將針對逐漸變大的屏幕。

body {
    /* default styles here, 
       targets mobile first */
}

@media screen and (min-width:480px) {
    /* style changes when the screen gets larger */
}

@media screen and (min-width:800px) {
        /* And even larger */
    }

相反，使用 max-width 是桌面優先，然后添加查詢以使樣式適合移動設備

body {
        /* default styles here, 
           targets desktops first */
    }

@media screen and (max-width:800px) {
    /* style changes when the screen gets smaller */
}

@media screen and (max-width:480px) {
        /* And even smaller */
    }

第 2 部分：對於寬度為 360 像素或更小的任何設備的特定自定義導航：

您可以將其作為單獨的最大寬度查詢包含在內，如果這是規則的唯一例外。 或者使用該樣式作為您的基線，然后將其更改為更寬的屏幕。

如果你做一個例外（這並不是真正遵循移動優先的設計方法），它會是這樣的：

body {
        /* default styles here, 
           targets mobile first
           ALSO will cover 361 - 479 width */
    }

@media screen and (max-width:360px) {
    /* style ONLY for screens with 360px or less width */
}

@media screen and (min-width:480px) {
    /* style changes when the screen gets larger */
}
etc...

Answer 2

這實際上取決於您的樣式表的工作方式。 例如：

@media screen and (min-width:100px) {
    body { font-weight:bold; }
}

@media screen and (min-width:200px) {
    body { color:#555; }
}

上述兩個媒體查詢會使body字體加粗，如果屏幕是大於或等於為100px，也使顏色#555 ，如果是大於或等於200像素;

另一個例子：

@media screen and (max-width:100px) {
    body { font-weight:bold; }
}

@media screen and (max-width:200px) {
    body { color:#555; }
}

與第一個示例不同，僅當屏幕寬度介於 0 和 100 像素之間時，這會使body字體為粗體和顏色#555 。 如果它在 0px 和 200px 之間，它將是 color #555 。

媒體查詢的美妙之處在於您可以組合這些語句：

@media screen and (min-width:100px) and (max-width:200px) {
    body { font-weight:bold; color:#555; }
}

在此示例中，您僅針對寬度介於 100 像素和 200 像素之間的設備——僅此而已。

簡而言之，如果您希望您的樣式從媒體查詢中泄露出來，您可以使用min-width或max-width ，但如果您想影響一個非常具體的標准，您可以將兩者結合起來。

Answer 3

簡而言之， min-width 是移動設備的第一種方法，max-width 是桌面設備的第一種方法。

Min-width 是開始應用樣式的最小寬度。 （必須從最小到最大訂購才能正常工作，首先是常規樣式）。 換句話說：如果設備寬度大於或等於...，則應用一些特定的樣式。 使用 min-width 時，只要滿足 min-width 要求，樣式就會開始並一直持續下去，並且沒有指定 max-width。

Max-width 是樣式將繼續應用的最大寬度。 之后，樣式將停止應用。 （必須從大到小訂購才能正常工作，首先是常規款式）。 換句話說：如果設備寬度小於或等於...，則應用特定樣式。 一旦寬度大於 max-width ，樣式就停止。

最后，這取決於您想如何實施。 有些人可能會聲稱，沒有一種正確的解決方案。 在我看來，從頭開始時 min-width 效果很好，但在改造現有網站時，max-width 通常對我更有意義。

Answer 4

因為您正在開發一個從移動設計開始並隨着分辨率增加復雜性的網站，我建議使用min-width因為它遵循相同的工作模式。

從技術上講， min-width是“移動優先”，因為您通常開始為移動設備進行開發，並隨着分辨率的增加而增加更多的復雜性。

然而，該術語因其替代含義而更受歡迎，這通常意味着更多地關注移動工作和優先級的增加（主要由不了解技術推理的客戶或管理層推動）。 這可能就是為什么您最終會在網上看到大量min-width示例（時尚博主撰寫時尚主題）的原因。

當我處理復雜的桌面設計時，我個人發現編寫max-width查詢來“簡化方程式”可以這么說更容易。 但是使用max-width查詢並不會阻止您專注於移動設備，並且仍然可以完全成為“移動優先”策略的一部分。

無論哪種情況，最重要的是一致性。 使用一個並堅持該項目。 如果項目同時使用兩者，它會變得非常混亂。

最后要注意的是，盡可能使用較少的查詢是理想的。 這可以通過良好的響應式設計來實現。

Answer 5

什么是移動優先和桌面優先的方法？

移動優先的樣式方法意味着樣式首先應用於移動設備。 然后通過媒體查詢將大屏幕的高級樣式和其他覆蓋添加到樣式表中。

這種方法使用

最小寬度

媒體查詢。

這是一個快速示例：

// This applies from 0px to 600px
body {
  background: red;
}

// This applies from 600px onwards
@media (min-width: 600px) {
  body {
    background: green;
  }
}

在上面的例子中， 將有一個低於 600px 的紅色背景。 它的背景在 600 像素及以上時變為綠色。

另一方面，桌面優先的樣式方法意味着樣式首先應用於桌面設備。 然后通過媒體查詢將小屏幕的高級樣式和覆蓋添加到樣式表中。 這種方法使用 >max-width 媒體查詢。

這是一個快速示例：

// This applies from 600px onwards
body {
  background: green;
}

// This applies from 0px to 600px
@media (max-width: 600px) {
  body {
    background: red;
  }
}

所有寬度的背景顏色均為綠色。 如果屏幕低於 600 像素，則背景顏色變為紅色。

Answer 6

我首先有一個沒有響應的網站，專為台式機設計。 然后通過添加最大寬度媒體查詢來增加響應能力。

我的網站現在有 320px、480px、768px、960px 和 1024px 等寬設備的布局，所以我添加了看起來像max-width: 479px 、 max-width: 767px 、 max-width: 959px等的媒體查詢。這工作正常 - 該站點的行為正常。

然而，我最近發現 Chrome 開發者工具“設備模式”有一個媒體查詢工具，對我來說真的非常有用。 它允許我點擊以顯示 Chrome 在我的頁面上找到的每個媒體查詢級別的網站。 在設計響應式布局時，這對我有很大幫助。

媒體查詢工具使用它在媒體查詢中找到的數字，即 479、767、959、1023 等。但這意味着，例如，如果我想查看我的 480 像素寬設備布局的外觀，我必須單擊最大寬度 767 像素級別的媒體查詢，這對我來說非常不直觀。

這讓我重新思考我當前的桌面優先 CSS，我將使用移動優先的方法重寫我的 CSS。

我認為使用min-width的移動優先 CSS 將更具可讀性，因為您將看到min-width: 480px的媒體查詢，並且知道這將是 480px 寬設備的 CSS。

Answer 7

我一直在工作的大多數網站首先是為桌面設計的，在這些情況下使用max-width查詢是有意義的。 通常，如果您開始使用小屏幕，首先使用min-width ，然后使用針對更大分辨率的媒體查詢進行構建。

您當然可以混合最小和最大查詢以獲得特定分辨率

也許看看使用min-device-width來解決您在導航中遇到的特定問題