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

卡卡西达蒙西里2020-03-18

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

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

我发现了一些例子：

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

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

L神乐2020/03/18 17:41:49

@media (max-width: 767px)   {

      .container{width:100%} *{color:green;}-Mobile

    }


    @media (min-width: 768px)  {

     .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 768px) and (orientation:portrait)  {

       .container{width:100%} *{color:yellow  } -Mobile

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

       .container{width:100%} *{color:pink  } -Desktop

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

    .container{width:1180px} *{color:pink   } -Desktop

    }

2020/03/18 17:41:49

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

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

古一NearEva2020/03/18 17:41:49

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

<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-query评估为false，则该.css文件及其内容将不会被渲染阻止。

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

在这里您可以阅读有关此问题的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

伽罗路易Tom2020/03/18 17:41:49

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

就我而言，顶部和底部60像素的效果很好！

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

在此处检查导航栏。

伽罗老丝2020/03/18 17:41:49

小型设备〜手机（<768px）
小型装置〜平板电脑（> = 768像素）
中型设备〜台式机（> = 992px）
大型设备〜台式机（> = 1200px）

Itachi十三Stafan2020/03/18 17:41:49

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

武藏神离2020/03/18 17:41:49

由于有许多不同的屏幕尺寸总是会改变，并且很可能会一直改变，因此最好的方法是将断点和媒体查询作为设计的基础。

最简单的方法是获取完整的桌面设计并在Web浏览器中打开它。缓慢缩小屏幕以使其更窄。观察一下设计何时开始“断裂”，或看起来多么恐怖和局促。此时，将需要一个带有媒体查询的断点。

通常会为台式机，平板电脑和手机创建三组媒体查询。但是，如果您的设计在所有这三个方面都看起来不错，那么为什么要添加三个不必要的不同媒体查询的复杂性呢？根据需要进行操作！

泡芙小胖2020/03/18 17:41:49

这与像素数无关，而与屏幕上字符的实际大小（毫米或英寸）有关，这取决于像素密度。因此，“最小宽度：”和“最大宽度：”是没有用的。有关此问题的完整说明在这里：设备像素比到底是多少？

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

前端逆天2020/03/18 17:41:49

超小型设备（电话，最大480px）
小型设备（平板电脑，768像素及以上）
中型设备（大型横向平板电脑，笔记本电脑和台式机，992px及以上）
大型设备（大型台式机，1200px及以上）
人像电子阅读器（Nook / Kindle），较小的平板电脑-最小宽度：481px
portrait tablets, portrait iPad, landscape e-readers - min-width:641px
tablet, landscape iPad, lo-res laptops - min-width:961px
HTC One device-width: 360px device-height: 640px -webkit-device-pixel-ratio: 3
Samsung Galaxy S2 device-width: 320px device-height: 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
Samsung Galaxy S3 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 2 (min--moz-device-pixel-ratio: 2), - Older Firefox browsers (prior to Firefox 16) -
Samsung Galaxy S4 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 3
LG Nexus 4 device-width: 384px device-height: 592px -webkit-device-pixel-ratio: 2
华硕Nexus 7设备宽度：601像素设备高度：906像素-webkit-min-device-pixel-ratio：1.331）和（-webkit-max-device-pixel-ratio：1.332）
iPad 1和2，iPad Mini设备宽度：768像素设备高度：1024像素-webkit-device-pixel-ratio：1
iPad 3和4设备宽度：768像素设备高度：1024像素-webkit-device-pixel-ratio：2）
iPhone 3G设备宽度：320px设备高度：480px -webkit-device-pixel-ratio：1）
iPhone 4设备宽度：320像素设备高度：480像素-webkit-device-pixel-ratio：2）
iPhone 5设备宽度：320像素设备高度：568像素-webkit-device-pixel-ratio：2）

Sam宝儿2020/03/18 17:41:49

如果要定位设备，则只需写入min-device-width。例如：

对于iPhone

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

对于平板电脑

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

这里有一些不错的文章：

伽罗Tom2020/03/18 17:41:49

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

在一般的智慧是不针对特定的设备或大小，而是重新塑造了“断点”一词：

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

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

使用自然断点

然后，“断点”成为您的移动设计开始“断”的实际点，即不再可用或视觉上令人愉悦。一旦有了一个运行良好的移动站点，而没有媒体查询，您就可以不再担心特定的大小，而只需添加处理连续较大视口的媒体查询即可。

如果您不打算将设计固定在确切的屏幕尺寸上，则这种方法可以消除针对特定设备的需求。设计本身在每个断点处的完整性确保它可以承受任何大小。换句话说，如果菜单/内容部分/任何内容在某种大小下不再可用，请为该大小设计一个断点，而不是为特定设备大小设计一个断点。

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

使用语义标记

另外，更简单，更语义DOM结构有nav，header，main，section，footer等（避免像可憎div class="header"嵌套内div标签）就越容易将是工程师的反应，特别是通过避免浮动CSS网格布局（莎拉Drasner的网格生成是一个强大的工具）和flexbox，可根据您的RWD设计计划进行安排和重新排序。

LEYPro前端2020/03/18 17:41:49

我已经使用该站点查找了分辨率，并根据实际数字开发了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;
  }
}

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

樱泡芙小哥2020/03/18 17:41:49

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

    }

ALPro2020/03/18 17:41:49

媒体查询常见设备断点

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

Mandy村村2020/03/18 17:41:49

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

实际上，许多设计人员将像素转换为em，主要是b / c em可以更好地进行缩放。在标准变焦下1em === 16px。将像素乘以1em/16px得到em。例如，320px === 20em。

为了回应评论，这min-width是“移动优先”设计的标准，其中您从设计最小的屏幕开始，然后添加越来越多的媒体查询，然后在越来越大的屏幕上工作。无论您是偏爱min-，max-还是它们的组合，都应了解规则的顺序，请记住，如果多个规则与同一元素匹配，则后面的规则将覆盖前面的规则。

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.