鈍足ランナーのIT日記

走るのが好きな5流のITエンジニアのブログ。

趣味の範囲は広いけど、どれも中途半端なクソブロガー楽しめるWebアプリを作ってあっと言わせたい。サーバーサイドPerl(Mojolicious)、クライアントサイドVue.js。Arduinoにも触手を伸ばす予定。

media query 仕様を読むのが基本

media queryの max-widthって??

最大幅?とおもっていたら、 何々以下っていうことだったのか。 viewport(スクロールバーを含めた表示領域) の幅が何々以下っていう意味か。

http://www.w3.org/TR/css3-mediaqueries/

以前買った大藤幹さんのCSS/CSS3入門教室にもちゃんと書いてあった。

bootstrap3のcssでも使われていまして・・ viewportの幅毎に定義されているんです。

767px以下、 768px以上、991px以下 992px以上、1199px以下 1200px以上

それぞれ、重なりあっているころガないのが肝。

@media (max-width: 767px) {
  .hidden-md.hidden-xs {
    display: none !important;
  }
  tr.hidden-md.hidden-xs {
    display: none !important;
  }
  th.hidden-md.hidden-xs,
  td.hidden-md.hidden-xs {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .hidden-md.hidden-sm {
    display: none !important;
  }
  tr.hidden-md.hidden-sm {
    display: none !important;
  }
  th.hidden-md.hidden-sm,
  td.hidden-md.hidden-sm {
    display: none !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
  tr.hidden-md {
    display: none !important;
  }
  th.hidden-md,
  td.hidden-md {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .hidden-md.hidden-lg {
    display: none !important;
  }
  tr.hidden-md.hidden-lg {
    display: none !important;
  }
  th.hidden-md.hidden-lg,
  td.hidden-md.hidden-lg {
    display: none !important;
  }
}