CSS媒体查询最小宽度和最小设备宽度冲突？ [英] CSS media queries min-width and min-device-width conflicting?

问题描述

我对媒体查询世界非常新鲜，很明显，除了明显的定位能力之外，我还缺少宽度和设备宽度之间的差异。

I am very new to the world of media queries, and it's clear there's something fundamental I'm missing about the difference between width and device-width -- other than their obvious targeting capacities.

我想定位具有相同断点的常规计算机和设备，所以我只是复制了我的所有min&最大宽度查询到最小设备和最大设备宽度查询。无论什么原因，当我添加 - 设备对手，我的CSS是非常不同的解释与普通计算机，我不知道我做错了什么。

I would like to target both regular computers and devices with the same breakpoints, so I just duplicated all of my min & max width queries to min-device and max-device width queries. For whatever reason, when I add the -device counterparts, my CSS is interpreted very differently by regular computers, and I'm not sure what I'm doing wrong.

您可以在这里看到效果

You can see the effects here (this is what it SHOULD look like)

在这里（添加-device-width到我的查询后，我的CSS被拧在最小的宽度 - 更大的分辨率，即使当浏览器的宽度小于被调用）。

And here (after adding -device-width to my queries, my CSS gets screwed up at the smallest width -- the larger resolutions are seen even when the browser width is smaller than what is getting called).

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

Here are my CSS links -- is there something wrong with my syntax? :

<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">

推荐答案

设备宽度是指显示器的分辨率1024从1024x768），而宽度是指浏览器本身的宽度（如果浏览器不是最大化，这将不同于分辨率）。如果你的分辨率足够大，让你在一个断点，但浏览器的宽度足够小，让你在另一个，你会得到一个奇怪的组合两者。

Device-width refers to the display's resolution (eg. the 1024 from 1024x768), while width refers to the width of the browser itself (which will be different from the resolution if the browser isn't maximized). If your resolution is large enough to get you in one break point, but the width of the browser is small enough to get you in another one, you'll end up with an odd combination of both.

除非你有合法的理由基于分辨率限制样式表，而不是视口的大小，那么只需使用 min-width max-width 并避免 min-device-width / code>。

Unless you have a legitimate reason to restrict the style sheets based on the resolution and not the size of the viewport, then just use min-width/max-width and avoid min-device-width/max-device-width.

这篇关于CSS媒体查询最小宽度和最小设备宽度冲突？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！