Question

我已经加载了一个设备样式表来处理网站中的响应式设计，但我正在努力按照我想要的方式对几个不同的媒体查询进行分组。

我有一个共享的样式，适用于小型Web窗口，任何旋转的移动设备和仅限纵向的iPad。

目前我正在通过此查询获取除iPad之外的所有内容：

@media all and (max-device-width: 480px), all and (max-width: 480px)

我正在使用此代码获取iPad：

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)

如何合并这两个媒体查询？

Answer 1

好的，对于有这个问题的人。

为实现这一目标，我最终使用媒体查询加载样式表，而不是在我的样式表中嵌入媒体查询。

<link rel="stylesheet" type="text/css" media="all and (max-device-width: 480px), all and (max-width: 480px)" href="device.css" />
<link rel="stylesheet" type="text/css" media="@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)" href="device.css" />

媒体查询 - 将特定设备定位在一起

1 个答案: