Question

我不确定这只发生在星系S4上，而是我用它来测试它。

我把代码划分到最低限度。

更改颜色只是为了测试代码。常规css有效，移动版本无法触发。

谢谢，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>test</title>

<style type="text/css">
@media only screen and (max-device-width : 480px) {

#aaa {
color:#ff7d00;
font-size: 100px;
text-align:left;    
}

}

#aaa {
color: #9b9b9b;
font-size: 50px;
text-align:center;
}
</style>
</head>

<body>

<div id="aaa">test</div>

</body>
</html>

Answer 1

它无效，因为您在实际的CSS之前添加了媒体查询。此外，您只需使用@media (max-width: 480px) { //styles here for devices whose screen size is less than 480px }代替@media only screen and (max-device-width: 480px) { //styles here }这应该可以完美运行：

<style type="text/css">
#aaa {
color: #9b9b9b;
font-size: 50px;
text-align:center;
}

@media (max-width: 480px) {

#aaa {
color:#ff7d00;
font-size: 100px;
text-align:left;    
}

}
</style>

这是 demo 。您可以尝试减小结果窗口的宽度，并在窗口大小减小到480px以外时查看文本样式的变化。

@media只有屏幕css没有在galaxy s4上工作

1 个答案: