2012年8月の記事

続・レスポンシブwebデザイン＆ PhotoSwipeへ変更

2012 08 08 カテゴリ：WEB ,スマホ ,パソコン ,仕事｜コメント(0)

こないだ『レスポンシブwebデザインにしてみた』で手を加えたこのサイト
残念ながらいくつか表示不具合が確認されたから、それらを順に直してみた

ついでに、今まで使ってた Lightbox Plus をやめて PhotoSwipe への変更も。

レスポンシブwebデザインにしてみた

2012 08 07 カテゴリ：WEB ,スマホ ,パソコン ,仕事｜コメント(0)

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

切り替えの幅に特に決まりはないみたいから、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を上書きしていく感じ。