前からやろうやろうと思いながら、なかなか重い腰を上げれずにいましたが、このブログをレスポンシブウェブデザインにしました。
HTMLのheadにviewportを追加
1
<meta name="viewport" content="width=device-width, initial-scale=1.0">
CSSに画像を引き延ばしたり縮めたりする機能と、ブラウザの横サイズにより振り分けの処理を追加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
@media screen and (max-width: 1238px) {
}
@media screen and (max-width: 980px) {
}
@media screen and (max-width: 650px) {
}
@media screen and (max-width: 480px) {
}
こだわれば色々複雑な事が出来るのでしょうが、手っ取り早く済ませたかったので、２時間使って出来る範囲で追加しました。
