メディア クエリに問題があります。メインdiv
の幅を 960 ピクセルにしたいのですが、画面が 960 ピクセルより小さい場合は、現在の幅の 80% にしたいです。
960px からは 80% しか得られず、それよりも小さいすべての 80% ではありません (例: 800px の 80%、700px の 80%)。
HTML:
<body>
<div class="main">
Some big amound of text
</div>
</body>
CSS:
body{
width:100%;
}
.main {
display: block;
height: 600px;
width: 960px;
}
@media (max-width: 960px) {
.main {
width:80%;
}
}
流動的にしたいのですが、960px と 960px の 80% の 2 つの位置にしか固定されていません。流動的にするにはどうすればよいですか?