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

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

我找到了一些例子:

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

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


当前回答

I have used this site to find the resolution and developed CSS per actual numbers. My numbers vary quite a bit from the above answers, except that the my CSS actually hits the desired devices. Also, have this debugging piece of code right after your media query e.g: @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; } } Add this debugging item in every single media query and you will see what query has being applied.

其他回答

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

为iPhone

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

为平板电脑

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

这里有一些不错的文章:

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

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

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

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

特别小的设备~手机(< 768px) 小设备~平板电脑(>= 768px) 中型设备~台式机(>= 992px) 大型设备~桌面 (> = 1200 px)

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

适用于流动电话

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

为平板电脑

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

为什么-桌面

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

对于高分辨率笔记本电脑

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

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

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