【RWD】レスポンシブWEBデザインの始め方
レスポンシブWEBデザインに対応するために、viewportを利用して、画面幅に合わせて読み込むCSSを変更する記述をします。
<meta name="viewport" content="width=device=width">
上記の書き方で画面幅一杯に表示しますという宣言になります。
記述例
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device=width"> <title>メディアクエリ</title> <link rel="stylesheet" href="style-l.css"> <link rel="stylesheet" href="style-m.css" media="only screen and (min-width:600px) and (max-widht:979px)"> <link rel="stylesheet" href="style-s.css" media="only screen and (max-width:599px)"> <title>ビューポートの横幅の指定</title> </head> <body> </body> </html>