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; } }