@media屏幕我的尺寸最佳实践

Question

我是@media屏幕的新手，所以请你是异教徒。

我没有流畅的设置，而是针对3种不同设备设置的固定设置。

Mobile = max-width 500px.
Tablet = max-width 740px.
Laptop/desktop/desktop hd = width 980px.

-

所以我说的正确如下：

@media (max-width: 500px) { }
@media (max-width: 740px) { }
@media (min-width: 741px) { }

Answer 1

你需要最后一个屏幕宽度，如下所示：

@media (min-width: 741px) { }
@media (max-width: 740px) { }
@media (max-width: 500px) { }

当CSS从顶部到底部读取时，您的max-width: 740px将重叠，因为320px仍然小于740px。

您还可以设置最小宽度：

@media (max-width: 500px) { }
@media (min-width:501px) and (max-width: 740px) { }    
@media (min-width: 741px) { }

然后你可以随意放置它们。

编辑：

这实际上更好：

[ CSS For 741px and above here ]

@media (max-width: 740px) { }
@media (max-width: 500px) { }

这样，您只需要在媒体查询中修复宽度，字体大小等，如果它们保持不变，则无需编写背景颜色和字体颜色。