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

1,764 views

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

・パソコン
・タブレット
・スマホ（縦向き）
・スマホ（横向き）
などなど、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/