CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
◆レスポンシブデザインについて
「レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなど、
近年多様化してきた複数の異なる画面サイズをWebサイト表示の判断基準にし、
ページのレイアウト・デザインを柔軟に調整することを指します。
◆メディアタイプ
メディアタイプは<link>要素や<style>要素のmedia属性、または、@mediaで指定します。
メディアタイプを指定することで、スクリーン表示用(screen)やプリント用(print)など、
メディアごとにスタイルシートを指定し分けることができます。
◆メディアクエリーの記述方法
一般的なMedia Queriesの記述の方法としては、何パターンかあります。
>>詳しくはこちら
http://katoshun.com/blog/rwd-20130127.html
◆可変レイアウトについて
リキッドレイアウトとは、ブラウザの表示領域に合わせてコンテンツの幅・位置を可変で表示させるもの。
表示環境による違いを最適化し、スマートフォン対応などにも有効。
pxで指定していた値を%へ変換する事によりカラム幅を変更することが可能になる。
pxから%への変換式は下記の式を使う。
変換したい値÷変換したい値の親要素の幅×100=%数値
>>詳しくはこちら
http://ascii.jp/elem/000/000/700/700502/