HOME > WEB > レスポンシブwebデザインにしてみた
つぶやく
レスポンシブwebデザインにしてみた

これまでフィーチャーフォン/スマートフォン対応でmt4iを入れてたけど、デバイスサイズによる振り分けをしてみたいなーと思い立ってレスポンシブwebデザインに変更してみたpc

切り替えの幅に特に決まりはないみたいから、CSSを以下のように設定。

@import url(/mt-static/themes-base/blog.css);
@import url(/mt-static/themes/lovebeer/lovebeer.css);
@import url(/mt-static/themes/lovebeer/lovebeer_m.css)only screen and (min-width:990px) and (max-width:1199px);
@import url(/mt-static/themes/lovebeer/lovebeer_s.css)only screen and (min-width:600px) and (max-width:989px);
@import url(/mt-static/themes/lovebeer/lovebeer_sp.css) only screen and (max-width:599px);

これでデバイスの幅によってCSSを切り替え。
基本のCSSに、切り替え時のCSSを上書きしていく感じ。

【1200px以上】
これまで通りのデザイン。
ヘッダーを左に置いて、右側のコンテンツ(3カラム)をスクロール可能で配置。
1200px以上

【990px~1199px】
ヘッダーを上に置くように変更。
990px~1199px

【600px~989px】
3カラムを2カラムに変更、メインコンテンツの幅を可変に。
600px~989px

【599px以下】
サイドバー非表示、メインコンテンツの幅は可変に。
599px以下

これでスマフォ用mt4iはいらなくなったかなhappy01
あとでトップページ、アーカイブインデックス、ブログ記事ページに書いておいたリダイレクト用PHPをなくしとこgood

あとは画像の幅だな。固定されてるのがいくつかあって画面幅以上の場合があるから何とかしないと。
 



【8/8 追加】
表示不具合への対処記事追加
 

コメントを残す



このページのトップへ