レスポンシブレイアウトと角丸のBOX

Pocket

CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き

◆レスポンシブデザインについて

レスポンシブレイアウト講義用PDF

「レスポンシブ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/


角丸BOX

d479bf01fd8ee608d6f2302d7f816ed81

コメントする

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください