CSS媒体查询的最小宽度和最小设备宽度是否冲突？

  • Z时代
  • 2024-01-10
  • 分类：问答

我对媒体查询世界还很陌生，很明显，宽度和设备宽度之间的差异让我遗漏了一些基本知识，除了它们明显的定位能力之外。

我想同时针对具有相同断点的常规计算机和设备，因此我只将所有最小和最大宽度查询都复制到了最小设备和最大设备宽度查询中。无论出于何种原因，当我添加-

device对应项时，常规计算机对CSS的解释都大不相同，因此我不确定自己做错了什么。

您可以在这里看到效果（这是应该的样子）

此处（在向查询添加-device-

width之后，我的CSS被固定为最小宽度-即使浏览器宽度小于调用的宽度，也可以看到较大的分辨率）。

这是我的CSS链接-我的语法有问题吗？：

<link rel="stylesheet" media="only screen and (max-width: 674px), only screen and (max-device-width: 674px)" href="300.css">
<link rel="stylesheet" media="only screen and (min-width: 675px) and (max-width: 914px), only screen and (min-device-width: 675px) and (max-device-width: 914px)" href="650.css">
<link rel="stylesheet" media="only screen and (min-width: 915px) and (max-width: 1019px), only screen and (min-device-width: 915px) and (max-device-width: 1019px)" href="915.css">
<link rel="stylesheet" media="only screen and (min-width: 1020px), only screen and (min-device-width: 1020px)" href="1020.css">
<link rel="stylesheet" media="only screen and (min-width: 1200px) and (max-width: 1299px), only screen and (min-device-width: 1200px) and (max-device-width: 1299px)" href="1200.css">
<link rel="stylesheet" media="only screen and (min-width: 1300px), only screen and (min-device-width: 1300px)" href="1300.css">

回答：

设备宽度是指显示器的分辨率（例如1024x768从1024x768），而宽度是指浏览器本身的宽度（如果浏览器未最大化，则与分辨率不同）。如果您的分辨率足够大，可以让您进入一个断点，但是浏览器的宽度足够小，可以使您进入另一个断点，那么您将得到两者的奇怪组合。

除非有正当的理由根据分辨率而不是视口的大小限制样式表，否则只需使用min-width/ max-width并避免使用min-device-

width/ max-device-width。

以上是 CSS媒体查询的最小宽度和最小设备宽度是否冲突？ 的全部内容， 来源链接： utcz.com/qa/402217.html

回到顶部