Question

我在iOS设备的“条件”CSS方面遇到了一些麻烦。这是我目前的来源...记下两个链接的样式表。如果不清楚，我想要使用mobile.css文件，如果它是iPhone / iPod Touch设备，则使用style.css。我得到了一些奇怪的实例，其中CSS标签的某些部分是从一个CSS文件中提取的，而其他标签是从另一个CSS文件中提取的。

例如，我希望根据哪个平台显示不同的标题。我在mobile.css中有一个#header {}部分，在style.css中有一个#header {}部分，这两个部分都有自己的背景图像。在非移动设备上工作正常，但是当我在iPod Touch上加载页面时，我从style.css获取图像，但是从mobile.css获取宽度/高度（从而裁剪/切断图像）。我能做错什么？两个CSS文件都经过验证。

提前致谢！（如果它有任何相关性，这完全是通过Grails）

<html>
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Home</title> 
    <link rel="stylesheet" href="/css/mobile.css" type="text/css" media="only screen and (max-device-width: 480px)" > 
    <link rel="stylesheet" href="/css/style.css" > 
        <meta name="layout" content="main"> 
</head> 

<body> 
    <div id="header"></div>
        <p>Test</p>
<body>
</html>

的style.css

#header {
    background-image: url('../images/casmlogo.png');
    background-repeat: no-repeat;
    height: 200px;
    margin-left: 20px;  

}

mobile.css

#header {
    background-image: url('../images/logo-apple.png');
    background-repeat: no-repeat;
    height: 100px;
}

Answer 1

在这种情况下，iOS设备将加载两个样式表。只需将mobile.css链接放在普通的style.css下面，事情会好很多。然后，mobile.css中的规则将覆盖style.css

中的规则

无法获得iOS设备的条件CSS工作

1 个答案: