媒体查询：如何针对桌面、平板和移动设备进行定位？

Question

我一直在研究媒体查询，但我仍然不太明白如何针对特定大小的设备进行定位。

我想能够针对桌面、平板和手机进行定位。我知道会有一些差异，但有一个通用系统可以用来定位这些设备会很好。

我找到了一些示例：

# 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)

每个设备的断点应该是什么？

- betamax

---

请查看以下有用的文章：

• 如何构建移动网站 - Smashing Magazine
• 如何使用CSS3媒体查询创建移动版本的网站 - Smashing Magazine

- Ahsan Rathod

标准设备的媒体查询 http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ - Dmytro Dzyubak

这篇2019年的文章涉及到Bootstrap和其他一些框架：https://ricostacruz.com/til/css-media-query-breakpoints - Mladen Adamovic

Answer 1

我认为这些是最好的断点：

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

编辑：对于960网格进行了优化：

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

实际上，许多设计师将像素转换为em，主要是因为em更容易缩放。在标准缩放下，1em === 16px，将像素乘以1em/16px即可得到em。例如，320px === 20em。

针对这个评论，min-width 在“移动优先”的设计中是标准的，你可以从最小屏幕开始设计，然后逐步添加越来越大的媒体查询，扩展到更大的屏幕。

无论你偏好使用 min-、max- 还是两者结合，都要注意你的规则顺序，如果有多条规则匹配同一个元素，则后面的规则会覆盖之前的规则。

- ryanve

---

为什么要使用min-width而不是max-width？如何防止min-width: 320px的CSS覆盖min-width: 801px？ - user2019515

这段代码在我的移动设备上无法运行！能否提供一个可用的示例？ - Jacob

有人拥有这个的“max-width”的等效属性吗？ - Pylinux

2018年 - 2k和4k正在增加。 - Alexander

@Josh 请搜索“设备像素比”（DPR）。物理像素和CSS像素之间存在差异。如果DPR为3，则1个CSS像素表示3个物理像素。因此，如果您创建一个1x1像素大小的HTML元素，则它将以3x3设备像素显示在屏幕上。 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/devicePixelRatio - Teemoh

Answer 2

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

普遍的智慧是不要针对特定设备或尺寸，而是重新定义“断点”的概念：

• 使用百分比或ems开发移动端优先的网站，而不是像素；
• 然后在更大的视口中尝试并注意何时开始失败；
• 重新设计布局并添加CSS媒体查询以处理破碎的部分；
• 重复该过程直到达到下一个断点。

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

使用自然断点

“断点”是移动设计开始“崩溃”，即不可用或视觉上不令人愉悦的实际点。一旦您拥有一个良好的工作移动站点，没有媒体查询，您可以停止关注特定大小，并简单地添加处理逐渐更大的视口的媒体查询。

如果您不试图将设计固定在精确的屏幕尺寸上，这种方法通过消除针对特定设备的需要而起作用。每个断点处的设计本身的完整性确保它在任何尺寸下都能保持。换句话说，如果某个菜单/内容部分/其他在某个尺寸上停止使用，请为该尺寸设计一个断点，而不是为特定设备尺寸设计断点。

请参见Lyza Gardner关于行为断点的帖子，以及Zeldman关于Ethan Marcotte和响应式Web设计如何演变的帖子。

使用语义标记。

进一步来说，DOM结构越简单语义化，如使用

、

、

、

、

等标签（避免像

这样的可怕结构，其中嵌套了内部

标签），就越容易实现响应式设计，特别是避免使用CSS Grid Layout（Sarah Drasner的grid generator是一个很好的工具）和flexbox进行排列和重新排序。

- Dave Everitt

---

客户希望他们的网站在iPad上看起来像这样。我最好的断点会使网站在iPad上切换到移动布局。但是客户不接受，他们希望在iPad和其他平板电脑上出现花哨的版本。 通常的做法不能解决我的问题 :) 我需要使用viewport元标记的技巧。虽然很痛苦，但我通过一点JavaScript的帮助解决了它（总是如此）。 PS：我使用厘米单位，而不是像素。 - Rolf

使用自然断点，您可以设置一个中等大小的断点，包括iPad（和其他平板电脑）的横向模式，或者为纵向模式添加另一个断点。我有时会使用四个断点，始终从移动设备优先开始编写CSS和所有标记（缩小规模更难，专注于移动设备意味着您的设计和内容被简化到必要的要素，您可以在尺寸增加时进行扩展），一个略高于400像素宽（或“高于移动设备尺寸”），然后是两个桌面尺寸，一个额外宽。然后，您可以将“高于移动设备”的断点样式设置得很好，以适应iPad。 - Dave Everitt

这还不够适用于所有情况。以复选框为例，它们在PC上的所有网络浏览器上可能都很好，但在平板电脑上太小了，用户无法触摸到它。有时候你确实需要针对设备进行优化，无论这是否是通用智慧。这是一篇不错的文章：http://www.html5rocks.com/en/mobile/cross-device/ - monalisa717

我同意Dave的观点——有太多不同的设备需要考虑，无法为所有设备设计网站。使用自然断点可确保您的网站在任何屏幕大小下都能正常工作。对于客户希望网站以某种方式呈现的情况，您需要进行教育。关于复选框太小的问题，请问您的标签在哪里？ - diggersworld

这是非常好的建议；我不同意传统智慧中的“移动优先”开发。对我来说，最好的方法是先开发最好、最全面的页面（最大的桌面），然后逐步缩小并根据需要逐渐删除较小屏幕所需的内容。另一个考虑因素是假设较小的设备具有比相应的桌面更低的带宽和处理能力，因此还要缩小资源密集型内容，如视频、滑块、大图像等。 - MQuiggGeorgia

Answer 3

如果您想针对特定设备进行目标定位，则只需编写min-device-width即可。例如：

针对 iPhone 设备

@media only screen and (min-device-width: 480px){}

对于平板电脑

@media only screen and (min-device-width: 768px){}

以下是一些不错的文章:

• 如何为苹果iPad适配你的网站
• CSS3媒体查询

- sandeep

---

我的平板电脑宽度为2560x1600。 - Lee Goddard

也许是这样，但移动设备上的浏览器有一个“设备像素比”。这意味着它将每个逻辑上的“像素”视为在您的设备上实际上是2、3甚至更多个像素。否则，20像素高度会非常小，无法点击 - 尤其是在您的屏幕上！ - greg84

@media only screen and (min-device-width: 480px){} 我尝试了一下，它也适用于桌面设备。但如果我们只想针对移动设备呢？ - Dariux

@Darius.V，这遵循“移动优先”的理念，这意味着您从移动端开始，然后随着屏幕变大进行更改，因此您需要包括以下内容： @media only screen and (min-device-width: 1024){} 或类似的内容来覆盖这些更改。 或者，如果您从桌面设计开始并且只想对小于1024的内容进行更改，则可以执行 @media only screen and (MAX-device-width: 1024){}。 - Steely

现在 device-width（和 height）已被弃用：https://developer.mozilla.org/en/docs/Web/CSS/@media/device-width - Asons

Answer 4

1. 我使用这个网站来查找分辨率和根据实际数字开发CSS。 我的数字与上面的答案相差很大，但我的CSS实际上可以适用于所需的设备。

2. 此外，在媒体查询之后加入这段调试代码，例如：

@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;
  }
} 

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

- user2060451

---

你分享的链接已经失效了，但是这里有一个：https://screenresolutiontest.com/ - kurdtpage

Answer 5

Twitter Bootstrap 推荐的最佳断点

/* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
        
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }

来源：https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries

本文介绍了 Twitter Bootstrap 框架中媒体查询的默认大小。这些媒体查询用于响应式设计，以便在不同的设备上呈现不同的样式。文章详细解释了媒体查询的工作原理，并提供了一张表格来展示默认的媒体查询大小和应用场景。如果你正在使用 Bootstrap 框架开发响应式网站，本文将为你提供有价值的参考。

- Santosh Khalse

---

这个答案需要一个来源链接。因此，如果 Twitter Bootstrap 改变了其值，我们可以在这里反映出来。你能否提供一个来源链接？谢谢。 - Mladen Adamovic

我认为Bootstrap 5中没有使用断点，而是使用x-small <576px，small <768，medium <992，large <1200，x-large <1400，xx-large> 1400，请参见https://getbootstrap.com/docs/5.0/layout/breakpoints/。 - RubenLaguna

Answer 6

常见设备断点的媒体查询

/* 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 */
}

- Purvik Dhorajiya

Answer 7

1. 小型设备（手机，最大宽度480像素）
2. 中小型设备（平板电脑，最小宽度768像素）
3. 中型设备（大型横向平板电脑、笔记本电脑和台式电脑，最小宽度992像素）
4. 大型设备（大型台式电脑，最小宽度1200像素）
5. 竖屏电子阅读器（Nook/Kindle）、较小的平板电脑 - 最小宽度481像素
6. 竖屏平板电脑、竖屏iPad、横屏电子阅读器 - 最小宽度641像素
7. 平板电脑、横屏iPad、低分辨率笔记本电脑 - 最小宽度961像素
8. HTC One 设备宽度: 360像素 设备高度: 640像素 -webkit设备像素比: 3
9. 三星Galaxy S2 设备宽度: 320像素 设备高度: 534像素 -webkit设备像素比: 1.5 (最小-moz-设备像素比: 1.5), (-o-min-device-pixel-ratio:3/2), (最小设备像素比: 1.5)
10. 三星Galaxy S3 设备宽度: 320像素 设备高度: 640像素 -webkit设备像素比: 2 (最小-moz-设备像素比: 2) -旧版Firefox浏览器（Firefox 16之前版本）-
11. 三星Galaxy S4 设备宽度: 320像素 设备高度: 640像素 -webkit设备像素比: 3
12. LG Nexus 4 设备宽度: 384像素 设备高度: 592像素 -webkit设备像素比: 2
13. Asus Nexus 7 设备宽度: 601像素 设备高度: 906像素 -webkit最小设备像素比: 1.331）和（-webkit最大设备像素比: 1.332）
14. iPad 1和2、iPad Mini 设备宽度: 768像素 设备高度: 1024像素 -webkit设备像素比: 1

iPad 3和4 设备宽度：768像素 设备高度：1024像素 -webkit-device-pixel-ratio:2

iPhone 3G 设备宽度：320像素 设备高度：480像素 -webkit-device-pixel-ratio:1

iPhone 4 设备宽度：320像素 设备高度：480像素 -webkit-device-pixel-ratio:2

iPhone 5 设备宽度：320像素 设备高度：568像素 -webkit-device-pixel-ratio:2

- Web Designer cum Promoter

---

三星Galaxy S3 @media only screen and (device-width: 720px) and (device-height: 1280px) 且 (-webkit-min-device-pixel-ratio: 2) 经过测试并且可用。 - user2060451

Answer 8

这仅适用于那些尚未将其网站设计为“移动优先”并正在寻找快速临时解决方案的人。

针对手机

@media (max-width:480px){}

针对平板电脑

@media (max-width:960px){}

适用于笔记本电脑/台式机

@media (min-width:1025px){}

适用于高分辨率笔记本电脑

@media (max-width:1280px){}

- lovelyramos

Answer 9

简洁明了

/* Mobile Devices */
@media (max-width: 480px) {
    foo > bar {
            
    }
}
        
/* Low resolution Tablets and iPads */
@media (min-width: 481px) and (max-width: 767px) {
    foo > bar {
        
    }
}
        
/* Tablets iPads (Portrait) */
@media (min-width: 768px) and (max-width: 1024px){
    foo > bar {
        
    }
}
    
/* Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1280px){
    foo > bar {
        
    }
}
    
/* Big boi Monitors */
@media (min-width: 1281px) {
    foo > bar {
        
    }
}

- Mike Ciffone

---

这些措施应该和 Bootstrap 使用的一样，我猜。 - user2340939

Answer 10

现在最常见的是看到视网膜屏幕设备，换句话说：具有高分辨率和非常高的像素密度的设备（但通常小于6英寸的物理大小）。这就是为什么您需要在CSS中使用视网膜显示器专用的媒体查询。这是我能找到的最完整的例子：

@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 

  /* Small screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 700px) {

  /* Medium screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

  /* Medium screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 1300px) {

  /* Large screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Large screen, retina, stuff to override above media query */

}

来源： CSS-Tricks网站

- Ezequiel Adrian

---

这个dpi/pixel-ratio媒体查询是否也会触发，如果使用4k屏幕的人发现他们实际上无法看到那么多像素，并且运行所有内容的>=2倍缩放，或者在浏览器中放大到>200%？ - Luc