CSS 媒体查询平板纵向及以下
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16122767/
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
Media query tablet portrait and below
提问by Nrc
I know how to do a media queries for tablets portrait and another for phones. But, is it possible to have just one only media query for all: tablets portrait and phones?
我知道如何对平板电脑肖像进行媒体查询，而对手机进行另一次媒体查询。但是，是否有可能只对所有媒体进行一个查询：平板电脑肖像和手机？
/* tablets portrait */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
}
/* phones */
@media screen and (max-device-width: 640px) {
}
/* tablets portrait and phones
Is it possible to have only one media query for this that do the same than the other media queries together?
*/
回答by nickhar
No.
不。
Why?
为什么？
iPads and iPhones are different devices with different screen dimensions, resolutions and different pixel densities (based on different versions/releases - see here).
iPad 和 iPhone 是不同的设备，具有不同的屏幕尺寸、分辨率和不同的像素密度（基于不同的版本/发布 - 请参阅此处）。
Device Screen(res) CSS pixel ratio
iPad (generation 1,2) 1024 × 768 1
iPad (generation 3,4) 2048 × 1536 2
iPhone (gen 1,3G,3GS) 480 × 320 1
iPhone (gen 4,4S) 960 × 640 2
iPhone (gen 5) 1136 x 640 2
The iPad is classed as a tablet, the iPhone a mobile and thus you'll never be able to use one media query to fully satisfy both or create an ideal experience for both devices.
iPad 被归类为平板电脑，iPhone 被归类为移动设备，因此您永远无法使用一个媒体查询来完全满足两者或为两种设备创造理想的体验。
What can I do?
我能做什么？
One solution is to offer a fairly common approach and provide media queries for 3 levels of device-type and/or screen width/orientation:
一种解决方案是提供一种相当常见的方法，并为 3 个级别的设备类型和/或屏幕宽度/方向提供媒体查询：
- Mobile/smart-phone
- Tablet
- Desktop
- 手机/智能手机
- 药片
- 桌面
The underlying theory being that you need your site or app to be usable/viewable on as many devices as possible, so standardise your approach instead of missing the plethora of individual devices and/or manufacturers.
基本理论是您需要您的网站或应用程序在尽可能多的设备上可用/可见，因此标准化您的方法而不是错过过多的单个设备和/或制造商。
A crude example might be:
一个粗略的例子可能是：
@media screen and (max-width:500px) {
/* Mobile styles */
}
@media screen and (min-width:501px) and (max-width:999px) {
/* Tablet styles */
}
@media screen and (min-width:1000px) {
/* Desktop styles */
}
But views differ widelyas to the best breakpoints between the three types and I know research/data on such breakpoints would be widely welcomed by the developer community.
但是对于这三种类型之间的最佳断点的看法差异很大，我知道关于此类断点的研究/数据会受到开发人员社区的广泛欢迎。
What if I want to target iOS devices specifically?
如果我想专门针对 iOS 设备怎么办？
You can do this. A few people have proposed media queries that meet the specific requirements of specific iOS devices (not tested, but that I've seen frequently along with the links I list below):
你可以这样做。一些人提出了满足特定 iOS 设备特定要求的媒体查询（未经过测试，但我经常看到这些以及我在下面列出的链接）：
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Further iOS-specific efforts by others:
其他人针对 iOS 的进一步努力：
- CSS Media Queries for iPads & iPhones
- Basic iPhone And iPad Screen Component Pixel Dimensions
- ios-test.css - media queries for iOS devices
- SO question: iPhone 5 CSS media query
General reference:
一般参考：
Caveat
警告
I've used one example method above, but media queries can be applied is a number of ways:
我在上面使用了一个示例方法，但可以通过多种方式应用媒体查询：
@media screen and (max-width:500px) { ... }
@import url(mobile.css) (max-width:500px);
<link rel="stylesheet" type="text/css" media="screen and (max-width: 500px)" href="mobile.css" />
回答by Alex S.
Take a look at Detectizr (https://github.com/barisaydinoglu/Detectizr) it is a Modernizr (http://modernizr.com/) extension.
看看 Detectizr ( https://github.com/barisaydinoglu/Detectizr) 它是一个 Modernizr ( http://modernizr.com/) 扩展。
This JS will add CSS classes to the html tag so that you can target devices without media queries. Such as .phone{} or .tablet{}
此 JS 将向 html 标记添加 CSS 类，以便您无需媒体查询即可定位设备。例如 .phone{} 或 .tablet{}
