我一直在做一些关于媒体查询的研究，但我仍然不太明白如何针对特定尺寸的设备。
我希望能够瞄准台式机、平板电脑和手机。我知道会有一些差异，但如果有一个通用的系统可以用来针对这些设备就好了。
我找到了一些例子:
# 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)
每个设备的断点应该是什么?
当前回答
这不仅仅是关于分辨率，你还需要找到设备的DPR: whatismyscreenresolution “设备像素比(DPR)是设备制造商提供的一个数字，用于HiDPI(每英寸高点数)或Retina(苹果的商标)显示器。”
媒体查询示例:(最小分辨率:3.0dppx)
其他回答
如果你想瞄准一个设备，那么只需要写min-device-width。例如:
为iPhone
@media only screen and (min-device-width: 480px){}
为平板电脑
@media only screen and (min-device-width: 768px){}
这里有一些不错的文章:
如何使你的网站适合苹果iPad CSS3媒体查询
因为有许多不同的屏幕尺寸总是在变化，最有可能总是在变化，最好的方法是根据你的设计来设置断点和媒体查询。
要做到这一点，最简单的方法是抓取你完成的桌面设计，并在浏览器中打开它。慢慢缩小屏幕，使其更窄。观察设计什么时候开始“断裂”，或者看起来可怕和局促。此时需要一个带有媒体查询的断点。
通常为台式机、平板电脑和手机创建三组媒体查询。但是，如果你的设计在这三个方面都很好，为什么要麻烦地添加三个不同的不必要的媒体查询呢?根据需要来做!
现在最常见的是视网膜屏幕设备，换句话说:设备具有高分辨率和非常高的像素密度(但通常小于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网站
对我来说最好的解决方案，检测设备是否移动:
@media (pointer:none), (pointer:coarse) {
}
@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
}
