レスポンシブ化

レスポンシブ化

皆さん今日は。今晩は。ロト君です。
今回はサイトの方を「レスポンシブ化」したので簡単な手順を掲載したいと思います。

 

そうなのです!今まではレスポンシブにする方法があまり良く分かっていなかったので、スマートフォンなのでサイトを閲覧する際、文字が小さすぎたり、画像が小さくなったり、ウィンドサイズがおかしくなったりと色々使い勝手が悪かったです・・・・。

 

しかし、この魔法の呪文を使えば簡単にウィンドサイズを最適化してくれるのです!

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

↑のmeta情報はhtml内のheadタグに記載して下さい。
このviewportがとても重要で、これがないと上手く表示されません>m<
(私はこれが無かった為にグチャグチャな表示になっていましたww)

 

そして後はCSSの設定を↓の様な感じにします。

/* iPhone 縦 */
@media screen and (min-width:0px) and (max-width: 480px) {
/*処理したい内容*/
}
/* for iPad */
@media screen and (min-width:481px) and ( max-width:768px) {
/*処理したい内容*/
}
/* for iPad */
@media screen and (min-width:769px) and ( max-width:1024px) {
/*処理したい内容*/
}
/* for PC */
@media screen and (min-width:1025px) {
/*処理したい内容*/
}

「処理したい内容」各画面サイズ毎に記載します。
後は、上手い事divタグ要素を使い「display: none」などを使えば非表示などが使えます。

 

今回はここまで。参考になったURLは下記のものです。よろしかったらご参照下さい。(>ω<)ノシ
http://ichimaruni-design.com/2015/01/viewport/

パソコンカテゴリの最新記事