媒体查询：如何定位桌面，平板电脑和移动设备？

我一直在研究媒体查询，我仍然不太了解如何定位某些尺寸的设备。

我希望能够定位台式机，平板电脑和移动设备。我知道会有一些差异，但是有一个可用于定位这些设备的通用系统会很不错。

我找到的一些例子：

# Mobile
only screen and (min-width: 480px)

# Tablet
only screen and (min-width: 768px) 

# Desktop
only screen and (min-width: 992px)

# Huge
only screen and (min-width: 1280px)

要么：

# Phone
only screen and (max-width:320px)

# Tablet
only screen and (min-width:321px) and (max-width:768px)

# Desktop
only screen and (min-width:769px)

您认为这些“断点”对于每个设备应该是什么？

#1楼

我使用这个网站来查找分辨率并根据实际数字开发CSS。我的数字与上述答案有很大不同，只是我的CSS实际上击中了所需的设备。

此外，在媒体查询后立即调试此代码，例如：

@media only screen and (min-width: 769px) and (max-width: 1281px) { /* for 10 inches tablet screens */ body::before { content: "tablet to some desktop media query (769 > 1281) fired"; font-weight: bold; display: block; text-align: center; background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */ position: absolute; top: 0; left: 0; right: 0; z-index: 99; } }

在每个媒体查询中添加此调试项，您将看到正在应用的查询。

#2楼

超小型设备（手机，最高480px）
小型设备（平板电脑，768px及以上）
中型设备（大型平板电脑，笔记本电脑和台式机，992px及以上）
大型设备（大型台式机，1200px及以上）
肖像电子阅读器（Nook / Kindle），较小的平板电脑 - 最小宽度：481px
肖像平板电脑，人像iPad，风景电子阅读器 - 最小宽度：641像素
平板电脑，风景iPad，低分辨率笔记本电脑 - 最小宽度：961px
HTC One设备宽度：360px设备高度：640px -webkit-device-pixel-ratio：3
三星Galaxy S2设备宽度：320px设备高度：534px -webkit-device-pixel-ratio：1.5（min-moz-device-pixel-ratio-1.5：）， - -o-min-device-pixel-ratio： 3/2），（min-device-pixel-ratio：1.5
三星Galaxy S3设备宽度：320px设备高度：640px -webkit-device-pixel-ratio：2（min - moz-device-pixel-ratio：2）， - 较旧的Firefox浏览器（Firefox 16之前） -
三星Galaxy S4设备宽度：320px设备高度：640px -webkit-device-pixel-ratio：3
LG Nexus 4器件宽度：384px器件高度：592px -webkit-device-pixel-ratio：2
华硕Nexus 7设备宽度：601px设备高度：906px -webkit-min-device-pixel-ratio：1.331）和（-webkit-max-device-pixel-ratio：1.332）
iPad 1和iPad，iPad Mini设备宽度：768px设备高度：1024px -webkit-device-pixel-ratio：1
iPad 3和4设备宽度：768px设备高度：1024px -webkit-device-pixel-ratio：2）
iPhone 3G设备宽度：320px设备高度：480px -webkit-device-pixel-ratio：1）
iPhone 4设备宽度：320px设备高度：480px -webkit-device-pixel-ratio：2）
iPhone 5设备宽度：320px设备高度：568px -webkit-device-pixel-ratio：2）

#3楼

不要针对特定设备或尺寸！

一般的智慧 不是针对特定的设备或尺寸 ，而是重新定义术语“断点”：

首先使用百分比或ems开发移动网站，而不是像素，
然后在更大的视口中尝试它并记下它开始失败的地方，
重新设计布局并添加CSS媒体查询以处理损坏的部分，
重复此过程，直到到达下一个断点。

您可以使用responsivepx.com查找“自然”断点，如Marc Drummond的“断点已死” 。

使用自然断点

然后，“断点”成为您的移动设计开始“破坏”的实际点，即停止可用或视觉上令人愉悦。一旦您拥有一个良好的工作移动网站，没有媒体查询，您可以不再关注特定大小，只需添加处理连续更大视口的媒体查询。

如果您没有尝试将设计固定到精确的屏幕尺寸，则此方法可以消除针对特定设备的需求 。 每个断点处的设计本身的完整性确保它可以保持任何尺寸。换句话说，如果菜单/内容部分/任何停止在某个大小上可用，则设计该大小的断点 ， 而不是特定设备大小。

请参阅Lyza Gardner关于行为断点的帖子，以及Zeldman关于Ethan Marcotte的帖子以及响应式网页设计如何从初始想法演变而来。

使用语义标记

此外，具有nav ， header ， main ， section ， footer等的DOM结构更简单，更具语义性 （避免像div class="header"具有嵌套内部div标签的可憎行为），设计响应性更容易，特别是避免浮动通过使用CSS网格布局（Sarah Drasner的网格生成器是一个很好的工具）和flexbox根据您的RWD设计计划进行安排和重新排序。

#4楼

这不是像素计数的问题，而是屏幕上字符的实际大小（以毫米或英寸为单位），这取决于像素密度。因此，“min-width：”和“max-width：”是无用的。这个问题的完整解释如下：设备像素比究竟是什么？

“@media”查询会考虑像素数和设备像素比，从而产生“虚拟分辨率”，这是您在设计页面时必须考虑的因素：如果您的字体是10px固定宽度并且“虚拟水平分辨率“为300像素，填充一条线需要30个字符。

#5楼

媒体查询常见设备断点

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* 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 */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3162277

标签

webkit

firefox

nexus

flexbox

媒体查询：如何定位桌面，平板电脑和移动设备？

#1楼

#2楼

#3楼

不要针对特定​​设备或尺寸！

使用自然断点

使用语义标记

#4楼

#5楼

媒体查询常见设备断点

不要针对特定设备或尺寸！