在iPad中使用媒体查询 [英] Use of Media Queries in CSS for iPad

问题描述

假设我有一个现有的桌面版CSS（desktop.css）。我想包括iPad Safari CSS。

在desktop.css中，我们只能在结束时执行条件导入。

  @media only screen and（device-width：768px）
 {
 @importipad.css
} 
  
 
 
 
在ipad.css中，我们只有iPad相关的样式。
 / * iPad Styles * / 
 
 
 
 ie如果是iPad用户，ipad.css将被导入，否则将被忽略。
 
 
 
最好的方法是什么？
 
           / blockquote> 
 
 
其实，不， @import 必须在任何其他样式声明之前。
 
 
 
但在你的情况下，如果你在开始导入iPad样式，它们可能会被你的桌面样式覆盖。所以你最好使用另一个< link> 元素与媒体查询，并指向你的 ipad.css  
 < link rel =stylesheetmedia =only screen and（device-width：768px）href = ipad.css> 
  
 
Say I have an existing CSS for desktop (desktop.css). I want to include iPad Safari css. 

In desktop.css, can we just do a condtional import at the end..
@media only screen and (device-width : 768px) 
{  
@import "ipad.css"
}
In ipad.css, we will have only iPad relevant styles..
/* iPad Styles */ 

i.e. if it is an iPad user, the ipad.css would get imported, else it would be ignored.

What is the best approach?
解决方案

  
In desktop.css, can we just do a condtional import at the end..
Actually, no, @imports have to come before any other style declarations.

But in your case, if you import your iPad styles at the beginning they'll probably all get overridden by your desktop styles. So you're better off using another <link> element with that media query and pointing to your ipad.css instead:
<link rel="stylesheet" media="only screen and (device-width: 768px)" href="ipad.css">


                        
这篇关于在iPad中使用媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！