2014-11-19

レスポンシブ化の備忘録

このブログはBloggieというテンプレを改造して適用してるんだけど、
レスポンシブってやつにしてみたくてちょっといじった。



参考:
結構簡単にできるBloggerテンプレートのレスポンシブデザイン化 : たき備忘録

  • @media screen and (max-width: 768px){} の中身をいったん全消し。
  • 固定幅になってる要素をChromeの「要素を検証」で探して、margin:0 auto;width:100%;overflow:hidden; を適用。
  • あとmargin, padding, タテヨコ幅の調整。

IE, Chrome, 持ってるスマホでしか確認してない。
でももうだいたい読めればいいや……



モバイルでライトボックス無効化

ライトボックスの表示がモバイルだと変だから、無効化した。
以前別のライトボックスを使ってた名残のクラス、「group2」に無効化適用。

a.group2 {
pointer-events: none;
cursor: default;
}

「親セレクタにデザイン適用」が普及してきたらこっちに切り替えたほうがいいかも。
参考:Selectors Level 4(CSS4セレクタ) - innov-staff-blog

a! > img {
pointer-events: none;
cursor: default;
}

0 件のコメント: