plantuml最大宽度_CSS-最大宽度与最小宽度

2部分答案

第1部分：要回答“为什么人们使用最小宽度而不是最大宽度？”：

它与设计流程有关。 通常，使用最小宽度模式时，您将设计移动优先。 使用最大宽度模式，您将首先设计桌面。

以最小宽度移动优先，默认样式是移动样式。 之后的查询将针对越来越大的屏幕。

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 */

}

相反，使用最大宽度是桌面优先，然后添加查询以使样式适合移动设备

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部分：对于宽度小于或等于360px的任何设备的特定自定义导航，请执行以下操作：

您可以将其作为单独的最大宽度查询包括在内，前提是这是该规则的唯一例外。 或使用该样式作为基准，然后将其更改为更大的屏幕。

如果您执行了例外处理(实际上并没有遵循移动优先设计方法)，则可能是这样的：

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...