CSS: Media queries
レスポンシブ対応を行う際の例
code:css
@media only screen and (max-width: 768px) {
...
}
only は、指定した条件に対応していないブラウザで適用されないようにする
新しいブラウザでは挙動変わらないので、互換性用に入れておくと吉
screen は、対になるのが印刷用の screen
画面を対象にするときは screen をつける
max-width は、この解像度までは適用しますよという意味
すなわち、 max-width: 768px はスマートフォン用のスタイルを書くのに使うと良い