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;}
}