0

HTML5,CSS3を使ってiphone & android mobileの画面を開発しています。

メディア クエリ内でどのようなスタイルを記述しても、デザインには影響しません。これらのスタイルをメディアクエリの外に配置すると、正常に機能するとします..

理由を教えてください..

ここで、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 に答える