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

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

这里有一些好文章:

• 如何使您的网站适合Apple iPad
• CSS3媒体查询

Answer 3

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

在一般的智慧是不针对特定的设备或大小,而是重新塑造了"断点"一词:

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

您可以使用responsivepx.com查找"自然"断点,如Marc Drummond的"断点已死".

使用自然断点

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

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

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

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

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

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

Answer 6

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 7

1. 超小型设备(手机,最高480px)
2. 小型设备(平板电脑,768px及以上)
3. 中型设备(大型平板电脑,笔记本电脑和台式机,992px及以上)
4. 大型设备(大型台式机,1200px及以上)
5. 肖像电子阅读器(Nook/Kindle),较小的平板电脑 - 最小宽度:481px
6. 肖像平板电脑,人像iPad,风景电子阅读器 - 最小宽度:641像素
7. 平板电脑,风景iPad,低分辨率笔记本电脑 - 最小宽度:961px
8. HTC One设备宽度:360px设备高度:640px -webkit-device-pixel-ratio:3
9. 三星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
10. 三星Galaxy S3设备宽度:320px设备高度:640px -webkit-device-pixel-ratio:2(min - moz-device-pixel-ratio:2), - 较旧的Firefox浏览器(Firefox 16之前) -
11. 三星Galaxy S4设备宽度:320px设备高度:640px -webkit-device-pixel-ratio:3
12. LG Nexus 4器件宽度:384px器件高度:592px -webkit-device-pixel-ratio:2
13. 华硕Nexus 7设备宽度:601px设备高度:906px -webkit-min-device-pixel-ratio:1.331)和(-webkit-max-device-pixel-ratio:1.332)
14. iPad 1和iPad,iPad Mini设备宽度:768px设备高度:1024px -webkit-device-pixel-ratio:1
15. iPad 3和4设备宽度:768px设备高度:1024px -webkit-device-pixel-ratio:2)
16. iPhone 3G设备宽度:320px设备高度:480px -webkit-device-pixel-ratio:1)
17. iPhone 4设备宽度:320px设备高度:480px -webkit-device-pixel-ratio:2)
18. iPhone 5设备宽度:320px设备高度:568px -webkit-device-pixel-ratio:2)

Answer 8

漂亮又简单

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

Answer 9

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

@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 网站

Answer 10

一项额外功能是您还可以在标签的媒体属性中使用媒体查询<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 资源，无论媒体属性如何。 区别在于，如果媒体属性的媒体查询被评估为false，则该 .css 文件及其内容将不会被渲染阻塞。

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

您可以在这里阅读有关此问题的 Google 文章https://developers.google.com/web/fundamentals/performance/ritic-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 11

由于有许多不同的屏幕尺寸总是在变化，而且很可能总是会发生变化，因此最好的方法是将断点和媒体 查询基于您的设计。

解决此问题的最简单方法是获取完成的桌面设计并在 Web 浏览器中打开它。慢慢缩小屏幕以使其更窄。观察设计何时开始“破裂”或看起来可怕而局促。此时需要一个带有媒体查询的断点。

通常为台式机、平板电脑和手机创建三组媒体查询。但是，如果您的设计在所有三个方面看起来都不错，为什么还要为添加三个不必要的不​​同媒体查询而烦恼呢？根据需要做！

Answer 12

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

手机用

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

平板电脑

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

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

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

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

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

Answer 13

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

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

Answer 14

对我来说最好的解决方案是检测设备是否是移动设备：

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

Answer 15

如果您想创建更具体的媒体查询，这里有一个 iPhone 的示例，该示例是从此链接https://css-tricks.com/snippets/css/media-queries-for-standard-devices/复制的，您可以找到媒体查询如需了解更多设备，请访问此链接）

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

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

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

}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

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

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

}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

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

}

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

}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

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

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

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

}

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

}