CSS レスポンシブ

media属性

<!– ウィンドウサイズが480px以下 –>
<link rel="stylesheet" href="small.css" media="screen and (max-width:480px)">
<!– ウィンドウサイズが481px~979px –>
<link rel="stylesheet" href="medium.css" media="screen and (min-width:481px) and (max-width:979px)">
<!– ウィンドウサイズが980px以上 –>
<link rel="stylesheet" href="large.css" media="screen and (min-width:980px)">

@mediaルール

@media screen and (min-width: 480px){
 ~
}
@media screen and (min-width: 780px) and (max-width: 980px){
 ~
}
@media screen and (min-width: 981px){
 ~
}


<div class="top-img">
 <img src="~" />
</div>
<style>
 .top-img {
  margin: auto;
  padding: auto;
  list-style-type: none;
 }
 
 @media screen and (max-width: 700px) {
  .top-img {
   width: 98%px;
  }
 }
 @media screen and (min-width: 701px) {
  .top-img {
   width: 709px;
  }
 }
</style>

ビューポート

<meta
  name="viewport"
  content="
    width=device-width,
    height=device-height,
    initial-scale=1,
    maximum-scale=1,
    user-scalable=no">
横幅、縦幅
width=device-width,
height=device-height,
※デバイスに合わせる(px指定も可)

初期表示倍率、最大倍率
initial-scale=1,
maximum-scale=1
上記例では初期表示倍率×1、最大倍率×1
つまり拡大できない。
(ゲーム等を除き非推奨)

拡大/縮小許可
user-scalable=no
アクセシビリティ、ユーザビリティは減少するが、
動作速度は速くなる。

次の記事

CSS リセットCSS