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
アクセシビリティ、ユーザビリティは減少するが、
動作速度は速くなる。

Follow me!