CSS 媒体查询 min-width 和 min-device-width 冲突？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15276218/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS media queries min-width and min-device-width conflicting?
提问by seaofinformation
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.
我对媒体查询的世界很陌生，很明显，宽度和设备宽度之间的区别我缺少一些基本的东西——除了它们明显的定位能力。
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.
我想以具有相同断点的常规计算机和设备为目标，所以我只是将所有最小和最大宽度查询复制到最小设备和最大设备宽度查询。无论出于何种原因，当我添加 -device 对应项时，常规计算机对我的 CSS 的解释非常不同，而且我不确定我做错了什么。
You can see the effects here(this is what it SHOULD look like)
你可以在这里看到效果（这是它应该是什么样子）
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).
在这里（在我的查询中添加 -device-width 之后，我的 CSS 在最小宽度处被搞砸了——即使浏览器宽度小于所调用的宽度，也能看到更大的分辨率）。
Here are my CSS links -- is there something wrong with my syntax? :
这是我的 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">
回答by cimmanon
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.
设备宽度是指显示器的分辨率（例如 1024x768 的 1024），而宽度是指浏览器本身的宽度（如果浏览器没有最大化，它将与分辨率不同）。如果您的分辨率大到足以让您进入一个断点，但浏览器的宽度又小到足以让您进入另一个断点，那么您最终会得到两者的奇怪组合。
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-widthand avoid min-device-width/max-device-width.
除非您有正当理由根据分辨率而不是视口的大小来限制样式表，否则只需使用min-width/max-width并避免min-device-width/ max-device-width。
