媒体查询。如何针对桌面、平板和移动设备？

我一直在做一些关于媒体查询的研究，但我仍然不大明白如何针对某些尺寸的设备。

我希望能够针对桌面、平板和移动设备。我知道会有一些差异，但如果有一个通用的系统可以用来针对这些设备，那就更好了。

我发现了一些例子。

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

你认为这些'断点'对每个设备应该是什么？

Quantastical
已编辑的问题 2日 五月 2013 в 1:06
编程
css3 css mobile tablet media-queries
16日 六月 2011 в 10:57
35 种观点
解决办法

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，主要是因为em能更好地承受缩放。在标准变焦时1em === 16px。用像素乘以1em/16px，就可以得到等分。例如，320px === 20em。

作为对评论的回应，"最小宽度 "是"移动优先"设计的标准，即你从最小的屏幕开始设计，然后添加不断增加的媒体查询，以适应越来越大的屏幕。不管你是喜欢 "最小"、"最大 "还是它们的组合，都要注意规则的顺序，记住如果多个规则匹配同一个元素，后面的规则将覆盖前面的规则。

ryanve
编辑本段答案28日 六月 2017 в 5:22
评论(16)

如果你想针对一个设备，那么只要写上min-device-width。比如说。

适用于iPhone

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

适用于平板电脑

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

这里有一些好文章。

Fizzix
编辑本段答案17日 三月 2014 в 5:13
评论(10)

1.我用这个网站找到了分辨率，并按实际数字开发了CSS。 我的数字与上面的答案有很大的不同，只是我的CSS实际上达到了预期的设备。

2.另外，在你的媒体查询之后要有这段调试的代码 比如说

    @media only screen and (min-width: 769px) and (max-width: 1281px) {
      /*用于10英寸平板电脑屏幕 */
      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); /* 半透明的黄色 */
        position: absolute;
        top:0;
        left: 0;
        right: 0;
        z-index:99;
      }
    }

在每一个媒体查询中添加这个调试项，你会看到应用了什么查询。

loxsat
编辑本段答案12日 一月 2019 в 10:25
评论(0)