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

我希望能够瞄准台式机、平板电脑和手机。我知道会有一些差异,但如果有一个通用的系统可以用来针对这些设备就好了。

我找到了一些例子:

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

Or:

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

每个设备的断点应该是什么?


当前回答

这只适用于那些还没有对网站进行“移动优先”设计,并正在寻找一个快速临时解决方案的人。

适用于流动电话

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

为平板电脑

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

为什么-桌面

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

对于高分辨率笔记本电脑

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

其他回答

很简单


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

因为有许多不同的屏幕尺寸总是在变化,最有可能总是在变化,最好的方法是根据你的设计来设置断点和媒体查询。

要做到这一点,最简单的方法是抓取你完成的桌面设计,并在浏览器中打开它。慢慢缩小屏幕,使其更窄。观察设计什么时候开始“断裂”,或者看起来可怕和局促。此时需要一个带有媒体查询的断点。

通常为台式机、平板电脑和手机创建三组媒体查询。但是,如果你的设计在这三个方面都很好,为什么要麻烦地添加三个不同的不必要的媒体查询呢?根据需要来做!

如果你想瞄准一个设备,那么只需要写min-device-width。例如:

为iPhone

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

为平板电脑

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

这里有一些不错的文章:

如何使你的网站适合苹果iPad CSS3媒体查询

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

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

在我看来,这些是最好的断点:

@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,很大程度上是因为ems提供更好的缩放效果。在标准缩放1em == 16px时,将像素乘以1em/16px得到ems。例如,320px === 20em。

对于这条评论的回应,最小宽度是“移动优先”设计的标准,即你从设计最小的屏幕开始,然后添加不断增加的媒体查询,直至越来越大的屏幕。

无论您是喜欢min-、max-还是它们的组合,都要认识到规则的顺序,记住,如果多个规则匹配同一个元素,后面的规则将覆盖前面的规则。