Question

我正在开发iphone＆amp;屏幕android mobile使用HTML5，CSS3。

无论我在媒体内部写的任何风格都不会影响我的设计。假设我将这些风格置于媒体查询之外，它的工作正常......

请让我知道原因..

这里我给出了我的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/

Answer 1

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

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

有关max-width和max-device-width

之间的差异，请参阅此answer

内部样式中的媒体查询不会影响设计

1 个答案: