メディアクエリの書き方

Tag:

メディアクエリを利用することで、ユーザが使用しているディスプレイに応じて異なるCSSを適用させることができます。

@media screen and (max-width: 1000px) {/* スクリーンサイズが1000px以下の場合に適用 */} 

@media screen and (max-width: 767px) {/* スクリーンサイズが767px以下の場合に適用 */} 

@media screen and (max-width: 480px) {/* スクリーンサイズが480px以下の場合に適用 */} 

@media screen and (max-width: 320px) {/* スクリーンサイズが320px以下の場合に適用 */} 

@media screen and (min-width: 768px) {/* スクリーンサイズが768px以上の場合に適用 */} 

min-widthとmax-widthを併用すると可読性が低下します。どちらか一方を利用することをおすすめします。

モバイルファースト

デフォルトはモバイル向けのスタイルで、スクリーンサイズが拡大していくごとにスタイルを上書きする。

/* モバイル向けのスタイル */

@media screen and (min-width: 768px) {/* スクリーンサイズが768px以上の場合に適用 */} 

@media screen and (min-width: 1200px) {/* スクリーンサイズが1200px以上の場合に適用 */} 

デスクトップファースト

デフォルトはデスクトップ向けのスタイルで、スクリーンサイズが縮小していくごとにスタイルを上書きする。

/* デスクトップ向けのスタイル */

@media screen and (max-width: 1199px) {/* スクリーンサイズが1199px以下の場合に適用 */} 

@media screen and (max-width: 767px) {/* スクリーンサイズが767px以下の場合に適用 */} 

スポンサーリンク