0

我正在使用 HTML5、CSS3 为 iphone 和 android 手机开发屏幕。

无论我在媒体查询中写什么风格，都不会影响我的设计。假设我将这些样式放在媒体查询之外，它工作正常..

请告诉我原因..

在这里，我给出了我的 jsFiddle 示例代码..

<body>
<header>
  <div> <img src="images/Uconnect_header.png" width="480" height="114"> </div>
</header>
<section> 
    <div id="headingTxt"><h5>UCONNECT ACCESS SERVICES</h5></div>
    <p class="descriptionTxt">Services intro copy will go here and need to be dynamically filled according to new and existing schemas. This could be larger or smaller then what is displayed here.</p>
    <hr>


body{
    margin:0px;
    padding:0px;
    background-color:#CCC;
    width:480px;
    border:1px solid red;
}
section{
    margin:10px;
}
@media only screen and (max-device-width: 480px) {

    #headingTxt{background-color:#009966;}
    .descriptionTxt{color:red;}
}

http://jsfiddle.net/prabunivas/dkdRt/

4

1 回答 1

0

试试这个@media (max-width: 480px) { ...

能够在开发时检查浏览器调整大小。

有关max-width 和 max-device-width 之间的差异，请参阅此答案

于 2013-03-28T13:31:18.450 回答