text.html

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