目前,级联样式表支持根据屏幕的宽度和高度来查询,并不支持直接判断一个设备是桌面电脑、平板电脑,还是手机。在实际的工作者,不建议根据特定的设备,指定特定的样式。
下例代码可以粗略地选择移动端设备(手机)。
@media screen and (max-width: 900px) and (hover: none) {
}
下列代码可以粗略地选择移动端手机,并排除了一些支持指针选择的移动端设备。
@media screen and (max-width: 900px) and (hover: none), (max-width: 900px) and (pointer: coarse) {
}
@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 */ }