Japanese subtitles

← Making it fluid - OSP

Get Embed Code
4 Languages

Showing Revision 1 created 05/19/2014 by K2480.

  1. viewport metaタグの設定は完了です
  2. デベロッパーツールで
  3. このページを修復していきましょう
  4. 最も大きな問題はカラム幅が
  5. 固定されていることです
  6. ウィンドウサイズを変更すると
    テキストのカラムは変化せず
  7. 余白部分だけが変わります
    デベロッパーツールで見れば
  8. その理由はすぐに分かります
  9. page要素に幅が設定してあります
  10. これを無効にするとどうなるかやってみます
  11. 確かに変わりましたが
  12. 改善された感じはありません
  13. さらに深く探っていきましょう
  14. このwrapperは幅が100%に設定されています
  15. リサイズの邪魔にならないので問題ありません
  16. このcontent要素は幅がピクセルで設定されています
  17. これを無効にしてページのサイズを変えると
  18. サイドバーが出たり消えたりしています
  19. 確かに幅が設定されていますが
  20. パーセンテージで設定し直しましょう
  21. 少しよくなりました
  22. ではpageに戻って幅を設定します
  23. 今度は幅をvw値で設定します
  24. 今度はviewportユニットで設定してみます
  25. 残る問題はヘッダです
  26. 思うようにリサイズできません
  27. 幅ではなく最大幅が設定してありました
    幅を設定しましょう
  28. まだ完璧ではありませんがこれですべて適切に
  29. リサイズできるようになりました
  30. 固定レイアウトから可変レイアウトへ移行する際には
  31. 固定ピクセルサイズと
    リサイズのパーセンテージがカギとなります