レスポンシブデザイン
ビューポート
@media規則でデバイスやサイズを判別
@media all and (min-width:600px){
}
600px以上になるとカッコ内のcssで上書きする
<meta name="vieport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
もう逃げない。HTMLのviewportをちゃんと理解する
>実際の液晶の解像度は一旦忘れろ。
<meta name="viewport" content="width=480">と指定したとする。
するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。
>次にviewportを実際の液晶画面に表示する。この時、viewportの幅が実際の液晶画面よりも大きければviewportがはみ出して、液晶画面にはviewportの一部しか表示されないだろう。逆に、viewportの幅が液晶画面よりも小さければviewportの内容は液晶画面に収まるが、液晶画面には余白ができてしまうだろう。これを調整するため、ブラウザはviewportのレンダリング結果を液晶の画面サイズに合うようにズームアップまたはダウンして表示する。
スマホやmacは解像度高い
見た目上同じピクセルの幅とおもっても解像度が大きいらしい
>重要なのはここでも実際の液晶の解像度ではなく360とか580などのスマホらしい小さい値が使われるということだ。
とりあえず横幅とかにあわせるらしい
>結局のところ
<meta name="viewport" content="width=360,initial-scale=1">
とか
<meta name="viewport" content="width=device-width,initial-scale=1">
を使えばいい。(結局、上の呪文と同じ形に落ち着いた)
授業では下の形を使っている。
基本的にもうレスポンシブしないというサイトはない
覚えなくていいのでコピーしたらいいらしい
<meta name="viewport" content="width=device-width,initial-scale=1"><!--レスポンシブ-->
先生の書き方
div{
width:;
height:;
}
初めにこう書いてから値をはめ込んでいる
res.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"><!--レスポンシブ-->
<title>レスポンシブ</title>
<link rel="stylesheet" href="res.css">
</head>
<body>
<div></div>
</body>
</html>
res.css
@charset "utf-8";
body{
background-color:#fff;
}
div{
width:100%;
height:200px;
background-color:#ff0;
}
cssに追加
@media all and (max-width:500px){
div{
background-color:#33f;
}
}
allとandの後に半角スペースが必要！
解像度とはピクセルパーインチ
1インチのなかにどれだけピクセルがつまっているか。
だから
街道度がめっちゃ高い＆pxで指定すると
めっちゃちいさく表示される
でOK
レスポンシブ
http://www.taskinteractive.com/tecnical/responsive/
