我一直在做一些关于媒体查询的研究，但我仍然不太明白如何针对特定尺寸的设备。
我希望能够瞄准台式机、平板电脑和手机。我知道会有一些差异，但如果有一个通用的系统可以用来针对这些设备就好了。
我找到了一些例子:
# 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)
每个设备的断点应该是什么?
当前回答
很简单
/* 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 (max-width:480px){}
为平板电脑
@media (max-width:960px){}
为什么-桌面
@media (min-width:1025px){}
对于高分辨率笔记本电脑
@media (max-width:1280px){}
@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
}
在我看来，这些是最好的断点:
@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-还是它们的组合，都要认识到规则的顺序，记住，如果多个规则匹配同一个元素，后面的规则将覆盖前面的规则。
Extra small devices (phones, up to 480px) Small devices (tablets, 768px and up) Medium devices (big landscape tablets, laptops, and desktops, 992px and up) Large devices (large desktops, 1200px and up) portrait e-readers (Nook/Kindle), smaller tablets - min-width:481px portrait tablets, portrait iPad, landscape e-readers - min-width:641px tablet, landscape iPad, lo-res laptops - min-width:961px HTC One device-width: 360px device-height: 640px -webkit-device-pixel-ratio: 3 Samsung Galaxy S2 device-width: 320px device-height: 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 Samsung Galaxy S3 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 2 (min--moz-device-pixel-ratio: 2), - Older Firefox browsers (prior to Firefox 16) - Samsung Galaxy S4 device-width: 320px device-height: 640px -webkit-device-pixel-ratio: 3 LG Nexus 4 device-width: 384px device-height: 592px -webkit-device-pixel-ratio: 2 Asus Nexus 7 device-width: 601px device-height: 906px -webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) iPad 1 and 2, iPad Mini device-width: 768px device-height: 1024px -webkit-device-pixel-ratio: 1 iPad 3 and 4 device-width: 768px device-height: 1024px -webkit-device-pixel-ratio: 2) iPhone 3G device-width: 320px device-height: 480px -webkit-device-pixel-ratio: 1) iPhone 4 device-width: 320px device-height: 480px -webkit-device-pixel-ratio: 2) iPhone 5 device-width: 320px device-height: 568px -webkit-device-pixel-ratio: 2)
