(9) 画面サイズに応じて動的にレイアウト変更

投稿者: | 2016年11月19日

1,326 views

この記事は最終更新から 2589日 が経過しています。

・パソコン
・タブレット
・スマホ(縦向き)
・スマホ(横向き)
などなど、WEBブラウザ表示画面のサイズにより、ホームページのレイアウトを変えたい場合がある。

そんなときは、WEBブラウザ側でHTMLソースを入力・解析するときに、画面サイズによりCSSを入れ替えさせればよい。

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=0.5,user-scalable=yes,initial-scale=1.0" />

<link href="style_base_small.css"  rel="stylesheet" type="text/css" media="only screen and (max-width: 320px)" >

<link href="style_base_medium.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 959px)" >

<link href="style_base_large.css"  rel="stylesheet" type="text/css" media="only screen and (min-width: 960px)" >

動作サンプルはこちら
https://www.dogrow.net/hp/sample/00009/

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)