原来当我们说起响应式设计的时候,我们一般针对的都是特定的设备。过去来说就是iPhone和iPad,而现在,人们访问我们的网站时,使用的设备类型五花八门,屏幕及尺寸也是各式各样,过去的经验在今天是行不通的。
然而,当我们想为某特定设备添加样式的时候,会出现一些情况,也许是某个APP被使用iPad Pro横屏的用户所访问。而针对特定的设备识别,可以使用包含组合两个或更多的查询,以形成一个长条件的响应式查询。所以针对前面的情况,我们可以使用min-device-width
和max-device-width
组合来甄别出使用横屏iPad Pro的用户,最终只需要一个屏幕方向查询加一个低分辨率的过滤就可以搞定了。
@media only screen
and (min-device-width: 96rem)
and (max-device-width: 128rem)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) { }