FC2ブログ

画面のサイズでCSSを切替える方法(レスポンシブWEB)

link要素のmedia属性の指定により、画面サイズでCSSの切り替えをします。
サンプルは以下のようにしています。

<ink media="only screen and (max-device-width:480px)" href="smart.css" type="text/css" rel="stylesheet" />
<link media="screen and (min-device-width:481px)" href="style.css" type="text/css" rel="stylesheet" />

※ブログの都合で <>括弧 は全角で記載しています。コピペする際は、半角に

480px以下のサイズのものは、smart.css(スマートフォン用のCSS)
481px以上のサイズのものは、style.css(パソコン用のCSS)

で切り替えをします。
これにより、スマートフォンで見たときと、パソコンで見たときの構成の制御をします!


レスポンシブWEBの作成について(まとめ)








コメント

非公開コメント

検索フォーム
RSSリンクの表示
リンク