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)" >