CSS媒体查询屏幕尺寸

一尘不染

CSS媒体查询屏幕尺寸

html

我目前正在尝试设计一种可以兼容多种屏幕尺寸的布局。我正在设计的屏幕尺寸如下：

屏幕尺寸：

640x480
800x600
1024x768
1280x1024（及更大）

我遇到的麻烦是创建css3媒体查询，以便当窗口的宽度变为这些宽度之一时，布局会发生变化。以下是我当前正在使用的媒体查询的示例，但不适用于我，因此我想知道是否有人可以帮助我修复它。

<link rel="stylesheet" type="text/css" media="screen and (max-width: 700px)" href="css/devices/screen/layout-modify1.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 701px) and (max-width: 900px)" href="css/devices/screen/layout-modify2.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 901px)" href="css/devices/screen/layout-modify3.css">

我尝试使用一组新的媒体查询，但是它们仍然对我不起作用。有人可以帮忙解释一下我错了吗。你们中的几个人已经尝试解释，但我不明白。新的媒体查询如下所示：

<link rel="stylesheet" type="text/css" media="screen and (max-width: 640px)" href="css/devices/screen/layout-modify1.css">

    <link rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" href="css/devices/screen/layout-modify2.css">

    <link rel="stylesheet" type="text/css" media="screen and (max-width: 1024px)" href="css/devices/screen/layout-modify3.css">

    <link rel="stylesheet" type="text/css" media="screen and (max-width: 1280px)" href="css/devices/screen/layout-modify4.css">

阅读 626

2020-05-10

共1个答案

一尘不染

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

#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)

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

2020-05-10