您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

CSS媒体查询屏幕尺寸

CSS媒体查询屏幕尺寸

除非您拥有更多的样式表,否则您将弄乱断点:

#1 (max-width: 700px)
#2 (min-width: 701px) and (max-width: 900px)
#3 (max-width: 901px)

第三种媒体查询可能是min-width: 901px。现在,它与#1和#2重叠,并且仅在屏幕恰好为901px宽时才单独控制页面布局。

编辑更新的问题:

(max-width: 640px)
(max-width: 800px)
(max-width: 1024px)
(max-width: 1280px)

媒体查询与catch或if / else语句不同。如果满足任何条件,则它将应用它匹配的每个媒体查询中的所有样式。如果仅为min- width所有媒体查询指定a ,则可能会匹配某些或所有媒体查询。在您的情况下,宽度为640px的设备与您的所有4个媒体查询都匹配,因此将加载所有样式表。您最有可能寻找的是:

(max-width: 640px)
(min-width: 641px) and (max-width: 800px)
(min-width: 801px) and (max-width: 1024px)
(min-width: 1025px)

现在没有重叠。仅当设备的宽度介于指定的宽度之间时,样式才适用。

CSS 2022/1/1 18:23:23 有387人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶