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)

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

Answer 1

IMO这些是最好的断点：

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

在实践中，许多设计师将像素转换为ems，主要是b / c ems更好地提供缩放。在标准缩放1em === 16px。将像素乘以1em/16px以获得ems。例如，320px === 20em。

在回应评论时，min-width是“移动优先”设计的标准，其中您首先设计最小的屏幕，然后添加不断增加的媒体查询，让您越来越大屏幕。无论您更喜欢min-，max-还是其组合，都要注意规则的顺序，请记住，如果多个规则匹配相同的元素，则后面的规则将覆盖之前的规则

Answer 2

如果您想定位设备，请写下min-device-width。例如：

适用于iPhone

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

适用于平板电脑

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

以下是一些好文章：

Answer 3

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

general wisdom 不是针对特定设备或尺寸，而是重新定义术语“断点”：

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

您可以使用responsivepx.com查找“自然”断点，例如'breakpoints are dead' by Marc Drummond。

使用自然断点

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

如果您没有尝试将设计固定到确切的屏幕尺寸，则此方法可以通过无需针对特定设备来实现。设计本身在每个断点处的完整性确保它可以保持任何大小。换句话说，如果某个菜单/内容部分/某些内容在特定大小上无法使用，为特定设备大小设计了该大小的断点，不。

请参阅Lyza Gardner在behavioural breakpoints上发表的文章，以及Zeldman关于Ethan Marcotte和how responsive web design evolved的帖子。

Answer 4

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

此外，请在媒体查询后立即调试此代码 e.g：

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

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

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

    }

Answer 6

媒体查询常见设备断点

*this

Answer 7

超小型设备（手机，最高480px）
小型设备（平板电脑，768像素及以上）
中型设备（大型平板电脑，笔记本电脑和笔记本电脑）桌面，992px及以上）
大型设备（大型台式机，1200px及以上）
人像电子阅读器（Nook / Kindle），较小的平板电脑 - 最小宽度：481像素
人像平板电脑，人像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 -比： 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和2，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）

Answer 8

这不是像素计数的问题，而是屏幕上字符的实际大小（以毫米或英寸为单位），这取决于像素密度。因此＆＃34; min-width：＆＃34;和＆＃34; max-width：＆＃34;没用这个问题的完整解释如下： what exactly is device pixel ratio?

＆＃34; @媒体＆＃34;查询考虑了像素数和设备像素比，从而产生了一个＆＃34;虚拟分辨率＆＃34;这是您在设计页面时必须考虑的内容：如果您的字体是10px固定宽度和＆＃34;虚拟水平分辨率＆＃34;是300 px，填充一行需要30个字符。

Answer 9

由于有许多不同的屏幕尺寸始终会发生变化，因此最有可能改变的最佳方式是建立断点和媒体查询关于您的设计。

最简单的方法是获取已完成的桌面设计并在Web浏览器中打开它。缩小屏幕慢慢以使其更窄。观察设计何时开始， ＆＃34;打破＆＃34; ，或者看起来很可怕和局促。此时，需要使用媒体查询的断点。

为桌面设备，平板电脑和手机创建三组媒体查询很常见。但是如果你的设计在所有三个方面看起来都很好，为什么还要加入添加三个不必要的不同媒体查询的复杂性。 根据需要进行操作！

Answer 10

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

对于手机

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

平板电脑

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

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

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

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

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

Answer 11

桌面上的行为不会改变。但在平板电脑和手机上，我扩展了导航栏以覆盖大徽标图像。注意：根据徽标高度的需要，使用 页边距（顶部和底部） 。

对于我的情况，60px顶部和底部工作完美！

@media (max-width:768px) { 
  .navbar-toggle {
      margin: 60px 0;
  }
}

检查导航栏here。

Answer 12

现在最常见的是看到视网膜屏幕设备，换句话说：具有高分辨率和非常高像素密度的设备（但通常小于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 Website

Answer 13

一项附加功能是，您还可以在<link>标签的 media 属性中使用媒体查询。

<link href="style.css" rel="stylesheet">
<link href="justForFrint.css" rel="stylesheet" media="print">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

以此，浏览器将下载所有CSS资源，而不管 media 属性如何。 区别在于，如果将media属性的media-query评估为 false ，则该.css文件及其内容将不会被阻止。

因此，建议使用<link>标签中的 media 属性，因为它可以确保更好的用户体验。

在这里您可以阅读有关此问题的Google文章https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

某些工具可根据您的媒体查询自动将CSS代码分隔在不同文件中

Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS https://www.npmjs.com/package/postcss-extract-media-query

Answer 14

$xs : "extra-small";
$s  : "small";
$m  : "medium";
$l  : "large";
$xl : "extra-large";

@mixin respond($breakpoint) {
  @if($breakpoint == $xs)  {
    @media only screen and (min-width: 320px) and (max-width: 479px) { @content; }
  }
  @if($breakpoint == $s)  {
    @media only screen and (min-width: 480px) and (max-width: 767px) { @content; }
  }
  @if($breakpoint == $m)  {
    @media only screen and (min-width: 768px) and (max-width: 991px) { @content; }
  }
  @if($breakpoint == $l)  {
    @media only screen and (min-width: 992px) and (max-width: 1199px) { @content; }
  }
  @if($breakpoint == $xl)  {
    @media only screen and (min-width: 1200px) { @content; }
  }
}

您还可以为小于 320px 的屏幕（如 Galaxy fold）再添加一个

Answer 15

超小型设备〜电话（<768px）
小型设备〜平板电脑（＆gt; = 768px）
中型设备〜桌面（＆gt; = 992px）
大型设备〜台式机（＆gt; = 1200px）

Answer 16

最适合我的解决方案，检测设备是否可移动：

@media (pointer:none), (pointer:coarse) {
}

Answer 17

不仅仅是分辨率，你还需要找到设备的DPR：
whatismyscreenresolution “设备像素比 (DPR) 是设备制造商提供的数字，用于 HiDPI（每英寸高点数）或 Retina（Apple 商标）显示器”

媒体查询示例：（最小分辨率：3.0dppx）

Answer 18

我正在用一个人做我的工作。

/* 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, 7, 8 ----------- */
@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+, 7+, 8+ ----------- */
@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 */
}

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

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

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* 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 */
}

Answer 19

至于2019年，我正在使用以下内容：

在style.css上具有用于桌面的所有CSS

所有在transaction.css上的媒体查询：响应式菜单的所有CSS +媒体断点

@media only screen and (min-width: 320px) and (max-width: 479px){ ... }

@media only screen and (min-width: 480px) and (max-width: 767px){ ... }

@media only screen and (min-width: 768px) and (max-width: 991px){ ... }

@media only screen and (min-width: 992px){ ... }

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

19 个答案:

适用于iPhone

适用于平板电脑

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

使用自然断点

媒体查询常见设备断点

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

19 个答案:

适用于iPhone

适用于平板电脑

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

使用自然断点

媒体查询常见设备断点

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