はてなブックマーク

目次 noknowがおすすめするメディアクエリの設定 デバイス一覧 noknowがおすすめするメディアクエリの設定 CSSでレスポンシブデザインをするためには、様々なデバイスサイズに対応する必要があります。 今回はモバイルファースト、PCファーストそれぞれのメディアクエリのベストプラクティスを考えてみました。 モバイルファーストにおけるメディアクエリ設定情報 css { /* スマートフォン (縦) */ } @media screen and (min-width: 500px) { /* スマートフォン (横) */ } @media screen and (min-width: 768px) { /* タブレット */ } @media screen and (min-width: 1024px) { /* PC. */ } @media screen and (min-width: