媒体查询：如何定位桌面，平板电脑和移动设备？-Java 学习之路

375

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

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

我找到的一些例子：

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

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

13 回答

Extra small devices ~ Phones (< 768px)
Small devices ~ Tablets (>= 768px)
Medium devices ~ Desktops (>= 992px)
Large devices ~ Desktops (>= 1200px)

回复于 2024-04-30T12:01:57+08:00

@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

    }

回复于 2024-04-30T12:01:57+08:00

媒体查询常见设备断点

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

回复于 2024-04-30T12:01:57+08:00

18
- 超小型设备（手机，最高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和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）
回复于 2024-04-30T12:01:57+08:00

129

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

Edit ：使用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 是"mobile-first" design中的标准，其中您首先设计最小的屏幕，然后添加不断增加的媒体查询，为更大和更大的屏幕工作 . 无论您是喜欢 min- ， max- 还是其组合，都要注意规则的顺序，请记住，如果多个规则匹配相同的元素，则后面的规则将覆盖之前的规则 .

回复于 2024-04-30T12:01:57+08:00

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

general wisdom是 not to target specific devices or sizes ，但重新定义术语'breakpoint'：
- 使用百分比或ems开发mobile first的网站，而不是像素，
- 然后在更大的视口中尝试它并记下它开始失败的地方，
- 重新设计布局并添加CSS媒体查询以处理损坏的部分，
- 重复此过程，直到到达下一个断点 .
您可以使用responsivepx.com查找'natural'断点，如'breakpoints are dead' by Marc Drummond .

使用自然断点

'breakpoints'然后变成 actual point at which your mobile design begins to 'break' 即停止可用或视觉上令人愉悦 . 一旦你有一个良好的工作移动网站，没有媒体查询，你可以不再关注特定的大小，只需添加处理连续更大的视口的媒体查询 .

如果您没有尝试将设计固定到精确的屏幕尺寸，则此方法适用于 removing the need to target specific devices . integrity of the design itself at each breakpoint 确保它可以保持任何尺寸 . 换句话说，如果菜单/内容部分/某些停止在某个大小上可用，则为该大小设计断点， not 用于特定设备大小 .

请参阅Lyza Gardner在behavioural breakpoints上的帖子，以及Zeldman关于Ethan Marcotte的帖子和how responsive web design evolved来自最初的想法 .
回复于 2024-04-30T12:01:57+08:00

141

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

回复于 2024-04-30T12:01:57+08:00

0
如果要定位设备，则只需编写 min-device-width . 例如：

适用于iPhone
```
@media only screen and (min-device-width: 480px){}
```
适用于平板电脑
```
@media only screen and (min-device-width: 768px){}
```
这是一些好文章：
- How to fit your website for the Apple iPad
- CSS3 Media Queries
回复于 2024-04-30T12:01:57+08:00

Twitter推荐的最佳断点引导

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

    }

回复于 2024-04-30T12:01:57+08:00

22

它's not a matter of pixels count, it'是屏幕上字符的实际大小（以毫米或英寸为单位），这取决于像素密度 . 因此"min-width:"和"max-width:"是没用的 . 这个问题的完整解释如下：what exactly is device pixel ratio?

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

回复于 2024-04-30T12:01:57+08:00
20

由于有许多不同的屏幕尺寸总是在变化，并且最有可能总是会改变，因此最好的方法是在设计上 Build 断点和媒体查询 .

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

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

回复于 2024-04-30T12:01:57+08:00

我用site来查找分辨率并根据实际数字开发CSS . 我的数字与上面的答案有很大不同，只是我的css实际上击中了所需的设备 .
此外，在媒体查询后立即调试此代码：例如：

@media only screen and (min-width: 769px) and (max-width: 1281px) { /* 10 inch tablet enter here */
  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;
  }
}

在网上得到这个，不记得确切的网站 . 在每个媒体查询中添加此调试项，您将看到正在应用的查询 .

回复于 2024-04-30T12:01:57+08:00

516
以下为我工作 . 桌面上的行为不会更改 . 但是在平板电脑和移动设备上，我扩展了导航栏以覆盖大徽标图像 . 请注意，请根据徽标高度的需要使用边距（顶部和底部） . 对于我的情况，60px顶部和底部工作完美 . 检查导航栏here .
```
@media (max-width:768px) { 
  .navbar-toggle {
      margin: 60px 0;
  }
}
```
回复于 2024-04-30T12:01:57+08:00

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

13 回答

媒体查询常见设备断点

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

使用自然断点

适用于iPhone

适用于平板电脑

相关问题