这个例子的媒体查询是正确的吗？

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（例如 568 像素）像素的像素都将不再适用。屏幕必须至少为 569 像素才能拾取它。

而且打印很简单，就是打印页面时会显示的内容。

希望对您有所帮助！根据您发布的内容，该结构 100% 正确。

这个例子的媒体查询是正确的吗？

Media queries are correct for this example?

html

css

media-queries