0
私はHTML、CSS、レスポンシブの基礎を学んでいます。私はモバイル用の@mediaクエリを設定しましたが、動作しません。私の敏感なウェブサイトはモバイルでは動作しません
しかし、デスクトップ（Chrome）からウェブサイトを開いて、ウィンドウのサイズを変更しようとすると、それが機能します。私はそれを修正するにはどうすればよいsinh.altervista.org
：あなたはそれをテストしたい場合は、上
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="div1">
<p class="txt">dig</p>
<p class="test">- DIG</p>
<div class="we"></div>
</div>
<div class="div2">
<p class="txt">dig</p>
<p class="test">Magni</p>
<div class="we"></div>
</div>
<div class="div3">
<p class="txt">dig</p>
<p class="test">Grillo</p>
<div class="we"></div>
</div>
</body>
</html>
CSS
body {
margin: 0px;
}
.div1 {
height: 100%;
width: 33.3%;
background-color: darkgrey;
float:left;
}
/*.we {
height: 200px;
width: 50%;
background-color: lightcoral;
margin-left: 165px;
}*/
.div2 {
height: 100%;
width: 33.3%;
background-color: darkslategray;
float:left;
}
.div3 {
height: 100%;
width: 33.3%;
background-color: darkorange;
float:left;
}
.txt {
text-align: center;
color: black;
font-size: 100;
padding-top: 50%;
}
.test {
text-align: center;
font-size: 50;
color: antiquewhite;
}
/* - - - - - - - - - - - - - - - - - - - */
@media screen
and (max-width: 320px)
and (orientation: portrait) {
body {
margin: 0px;
}
.div1 {
height: 500px;
width: 100%;
background-color: darkgrey;
}
.div2 {
height: 500px;
width: 100%;
background-color: darkslategrey;
}
.div3 {
height: 500px;
width: 100%;
background-color: darkorange;
}
.txt {
text-align: center;
color: black;
font-size: 50;
padding-top: 25%;
}
.test {
text-align: center;
font-size: 25;
color: antiquewhite;
}
}
を行くことができますか？そして、すべてのデバイスの実際のメディアクエリは何ですか？ネット上で私は多くの異なる@mediaクエリを見つけました。