月別: 2016年11月

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

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

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