媒体查询 - 将特定设备定位在一起 [英] Media queries - targeting specific devices together

问题描述

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

我有一个共享的样式集，适用于小型网页，任意轮播的移动设备和仅限肖像的iPad。

目前除了iPad，我得到的所有内容都有这个查询：

  @media all和（max-device-width：480px），全部和（最大宽度：480px）
  

我正在使用以下代码获取iPad：

  @media only screen 
 and（min-device-width：768px）
 and（max-设备宽度：1024px）
和（方向：肖像）
  

如何组合这些两个媒体查询？

解决方案

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

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

 < link rel =stylesheettype =text / cssmedia =all和（max-device-width：480px），all和（max-width：480px）href =device.css/> 
< link rel =stylesheettype =text / cssmedia =@ media only screen and（min-device-width：768px）and（max-device-width：1024px）and（orientation：肖像）href =device.css/> 
  

I've got a devices stylesheet that is loaded to deal with responsive design in a website, but I'm struggling to group a couple different media queries exactly how I want.

I've got a shared set of styles for a small web window, a mobile device at any rotation and an iPad in portrait only.

At the moment I'm getting everything except the iPad with this query:

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

I'm getting the iPad in portrait with this code:

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

How do I combine these two media queries?

解决方案

Okay, for anyone with this problem.

To achieve this I ended up using the media queries to load the stylesheet, rather than embedding the media query in my stylesheet.

<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" />

这篇关于媒体查询 - 将特定设备定位在一起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！