如何编写针对所有移动设备和平板电脑的 CSS 媒体查询？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12469875/
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
How to code CSS media queries targeting ALL mobile devices and tablets?
提问by user1666487
@media only screen and (max-device-width : 640px) {
/* Styles */
}
@media only screen and (max-device-width: 768px) {
/* Styles */
}
This is what I have so far. The PSD mockup for the mobile site I'm working on, is 640px wide. The other one, the tablet version of the site, is 768px. I was able to test the site in my web browser by only using max-width, but now it's time to get this site working on the devices, and it's still rendering the regular full size web page. The two queries above are my best guess. Where am I going wrong?
这是我到目前为止。我正在开发的移动网站的 PSD 模型宽 640 像素。另一个是该网站的平板电脑版本，为 768 像素。我能够仅使用 max-width 在我的 Web 浏览器中测试该站点，但现在是让该站点在设备上运行的时候了，它仍在呈现常规的全尺寸网页。上面的两个查询是我最好的猜测。我哪里错了？
回答by Danield
This can be done with Level 4 Media Queries: (Browser Support is quite good - CaniUse)
这可以通过 Level 4 Media Queries 来完成：（浏览器支持非常好 - CaniUse）
Interaction Media Features
交互媒体功能
The idea here is to target devices based on their capabilities. (as apposed to say, checking the sizeor resolutionof the device which tend to be moving targets)
这里的想法是根据设备的功能定位设备。（顾名思义，检查往往是移动目标的设备的大小或分辨率）
The pointermedia featurequeries the quality of the pointer mechanism used by the device.
该指针媒体特征查询由该装置所使用的指针机构的质量。
The hovermedia featurequeries the user's ability to hover over elements on the page with a given device.
该悬停媒体功能查询用户的在页面上的元素与给定的设备能力，悬停。
So to answer the question...
所以要回答这个问题...
Mobile devices/tables are similar in that:
移动设备/桌子的相似之处在于：
1) The accuracy of the primary input mechanism of the device is limited.
1) 设备的主要输入机制的准确性是有限的。
This means we could use the following media query:
这意味着我们可以使用以下媒体查询：
@media (pointer:coarse) {
/* custom css for "touch targets" */
}
div {
width: 400px;
height: 200px;
color: white;
padding: 15px;
font-size: 20px;
font-family: Verdana;
line-height: 1.3;
background: green;
}
@media (pointer:coarse) {
div {
background: red;
}
}<h2>The <a href="https://www.w3.org/TR/mediaqueries-4/#pointer">pointer media feature</a> queries the quality of the pointer mechanism used by the device.</h2>
<div>The background here will be green on 'desktop' (devices with an accurate pointing mechanism such as a mouse) and red on 'mobile' (devices with limited accuracy of primary input mechanism) </div>Codepen Demo
代码笔演示
2) The primary pointing system can't hover
2）主指向系统不能悬停
So our media query would look like this:
所以我们的媒体查询看起来像这样：
@media (hover: none) {
/* custom css for devices where the primary input mechanism cannot hover
at all or cannot conveniently hover
}
NB:Chrome/Android prior to version 59 required the on-demandvalue for hover/any-hover media queries. This value was later removed from the spec and no longer required by Chromefrom version 59.
So to support older versions of Android you need
注意：版本 59 之前的 Chrome/Android 需要on-demand悬停/任意悬停媒体查询的值。此值后来从规范中删除，Chrome从 59 版起不再需要。因此，要支持旧版本的 Android，您需要
@media (hover:none), (hover:on-demand) {
/* custom css for "touch targets" */
}
div {
width: 400px;
height: 150px;
color: white;
padding: 15px;
font-size: 20px;
font-family: Verdana;
line-height: 1.3;
background: green;
}
@media (hover:none), (hover:on-demand){
div {
background: red;
}
}<h2>The <a href="https://www.w3.org/TR/mediaqueries-4/#hover">hover media feature</a> queries the user's ability to hover over elements on the page</h2>
<div>The background here will be green on 'desktop' (devices which support hover) and red on 'mobile' (devices which don't [easily] support hover ) </div>Codepen Demo
代码笔演示
NB:
注意：
Even if you were to connect a mouse to a mobile/tablet, the hover media feature still matches nonesince their primaryinteraction mode doesn't support hover.
即使您将鼠标连接到手机/平板电脑，悬停媒体功能仍然匹配，none因为它们的主要交互模式不支持悬停。
If we do want to take secondarydevices into consideration we could use the any-pointer and any-hover features
如果我们确实想考虑辅助设备，我们可以使用任意指针和任意悬停功能
So if we wanted mobile devices connected with a pointing device to be treated like a 'desktop' we could use the following:
因此，如果我们希望将与指点设备连接的移动设备视为“桌面”，我们可以使用以下内容：
@media (any-hover: hover) { ... }
Extra reading
额外阅读
回答by liljoshu
Instead of using specific widths initially, or messing around with orientations, or any other nonsense, I suggest using the following media tag...
我建议使用以下媒体标签，而不是最初使用特定的宽度，或者乱七八糟的方向或任何其他废话...
@media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
/* Your touch-specific css goes here */
}
@media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
/* Your click-specific css goes here */
}
And what do you use these tags for? To set stuff for hover & click vs touch events.
你用这些标签做什么？设置悬停和点击与触摸事件的内容。
Touch devices, other than a few devices in grey areas above addressed, have a very different resolution than desktop devices. Do -not- this to set design elements, but navigation elements. Some pudents may cry that some insanity with max-width may be better, but there's so many HD phones it's ridiculous that device-max-width quickly becomes useless.
除了上面提到的灰色区域中的少数设备之外，触摸设备的分辨率与桌面设备非常不同。不要 - 设置设计元素，而是设置导航元素。有些人可能会哭诉说，用 max-width 疯狂一些可能会更好，但是有这么多高清手机，设备最大宽度很快就变得无用了，这太荒谬了。
However, you shoulduse width media width queries. However, don't bother with max-device-width, just max-width & min-width. Let the above tags address your touch vs not touch users, let min-width vs max-width address based on window size and adjust site visuals.
但是，您应该使用宽度媒体宽度查询。但是，不要理会最大设备宽度，只需考虑最大宽度和最小宽度。让上述标签解决您的触摸用户与非触摸用户的问题，让最小宽度与最大宽度地址基于窗口大小并调整站点视觉效果。
Further, using orientation to determine if it's mobile or not is just silly, as even monitors can be placed in various orientations (a common setup I've seen for 3-monitors is a portrait center monitor and landscape side monitors.)
此外，使用方向来确定它是否可移动只是愚蠢的，因为即使显示器也可以放置在各种方向（我见过的 3 显示器的常见设置是纵向中央显示器和横向侧面显示器。）
For width views, focus on making your site clean on various widths, ignoring what kind of device is actually accessing it, just make sure your screen displays cleanly at various sizes. That's good design that applies to both desktop and mobile. If they have your site in a small window at the upper left corner of their screen for reference (or quick distraction) while using the majority of their screen real estate elsewhere, and it should be for them, as well as mobile users, that your smaller widths are built for. Trying anything else is quickly going down a very painful and self-defeating path for web development. So for those smaller widths, you can set your widths to whatever you want, but I'll include a few I personally like.
对于宽度视图，专注于使您的网站在各种宽度上保持干净，而忽略实际访问它的设备类型，只需确保您的屏幕以各种尺寸干净地显示即可。这是适用于桌面和移动设备的好设计。如果他们将您的网站放在屏幕左上角的一个小窗口中以供参考（或快速分散注意力），同时在其他地方使用他们的大部分屏幕空间，那么对于他们以及移动用户来说，您的网站应该是较小的宽度是为。尝试任何其他方法很快就会走上 Web 开发的一条非常痛苦和弄巧成拙的道路。因此，对于那些较小的宽度，您可以将宽度设置为任何您想要的宽度，但我会包括一些我个人喜欢的宽度。
So altogether, you should have something like this...
所以总的来说，你应该有这样的东西......
@media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
#touch_logo {
display: inherit;
}
#mouse_logo {
display: none;
}
/* Your touch-specific css goes here */
}
@media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
#touch_logo {
display: none;
}
#mouse_logo {
display: inherit;
}
/* Your click-specific css goes here */
}
@media (min-width: 541px){
/* Big view stuff goes here. */
}
@media (max-width: 540px) and (min-width: 400px){
/* Smaller view stuff goes here. */
}
@media (max-width: 399px){
/* Stuff for really small views goes here. */
}
Although, don't forget to include the following in your page's head:
尽管如此，不要忘记在页面的头部包含以下内容：
<meta name='viewport' content="width=device-width, initial-scale=1" />
It may still break on some cases, but this should be more concise and more complete than many other solutions.
在某些情况下它可能仍然会中断，但这应该比许多其他解决方案更简洁、更完整。
回答by Rahi.Shah
You have your main desktop styles in the body of the CSS file (1024px and above) and then for specific screen sizes:
你在 CSS 文件的主体中有你的主要桌面样式（1024px 及以上），然后是特定的屏幕尺寸：
@media all and (min-width:960px) and (max-width: 1024px) {
/* put your css styles in here */
}
@media all and (min-width:801px) and (max-width: 959px) {
/* put your css styles in here */
}
@media all and (min-width:769px) and (max-width: 800px) {
/* put your css styles in here */
}
@media all and (min-width:569px) and (max-width: 768px) {
/* put your css styles in here */
}
@media all and (min-width:481px) and (max-width: 568px) {
/* put your css styles in here */
}
@media all and (min-width:321px) and (max-width: 480px) {
/* put your css styles in here */
}
@media all and (min-width:0px) and (max-width: 320px) {
/* put your css styles in here */
}
This will cover pretty much all devices being used - I would concentrate on getting the styling correct for the sizes at the end of the range (ie 320, 480, 568, 768, 800, 1024) as for all the others they will just be responsive to the size available.
这将涵盖几乎所有正在使用的设备 - 我将专注于为范围末尾的尺寸（即 320、480、568、768、800、1024）设置正确的样式，而对于所有其他设备，它们只会是响应可用的大小。
Also, don't use px anywhere - use em's or %
另外，不要在任何地方使用 px - 使用 em 或 %
