对于此示例，媒体查询正确吗？

Question

我是 CSS 初学者，我不知道我是否正确理解媒体查询。

要有这样的 css 结构：

general css 

     fonts, paddings, colors, etc 

css for small screens (up to 499px) 

     specific css for this resolution 

 css for large screen (more than 500px) 

      specific css for this resolution 

css specific for impression

      specific css for this case, for example different text color, etc 

正确的媒体查询结构是这样的吗？

/* GENERIC CSS */ 

/* CSS for small screens */ 

@media only screen and (max-width: 499px) { ... }

/* CSS for small screens */

@media only screen and (min-width: 500px) { ... }

/* CSS for some specific changes like text color, etc for printing on paper */

@media print {...}

Answer 1

因此，一般来说，CSS 文件应该在媒体查询之上使用通用 CSS 来构建。然后，如果您想在较小的屏幕尺寸下更改 CSS，您可以使用max-width媒体查询。可以这样想，@media (max-width: 568px)这意味着该 css 将应用的最大屏幕尺寸是 568 像素。任何大于此值的值，CSS 将不再适用。同样适用于min-width. @media (min-width: 569px)表示此 CSS 将应用的最小宽度是 569 像素。任何低于 569（例如 568px）像素的值将不再适用。屏幕必须至少为 569 像素才能拾取它。打印是直接的，这就是打印页面时将显示的内容。希望有帮助！从您发布的内容来看，该结构 100% 正确。