フリーフォント

Penguins

漫勉

まんべん

フリーベクター素材

Tulips

[CSS]メディアクエリの書き方、ブレイクポイントの最適な値のまとめ

2017-02-06

[コリス]レスポンシブデザインでよく使うメディアクエリの書き方、ブレイクポイントの最適な値のまとめ

sp

 

 

【Scene Live】適切なブレイクポイントを考えてみる(レスポンシブデザイン用)

モバイル専用の見せ方が必要になるので、タブレットで見たときとデザインを分ける必要があります。
結論から言うと、ブレイクポイントは、600pxと960px(と1281px)です。つまり、
	・599pxまではモバイル専用
	・600px~959pxまではタブレット(とブラウザを狭くしたデスクトップ)
	・960px~1280pxまではデスクトップ(と横置きしたタブレット)(・1281px以上はデスクトップ専用)
ということです。

【Scene Live】基本的な書き方

レスポンシブWebデザインのサイトを作るときのMedia Queriesの順番を考えてみた

1. PCのスタイルから記述していく方法
デフォルトでPC用のスタイルを定義し、タブレット/スマートフォン用のスタイルはMedia Queriesを使って上書きしていくPCファースト的な方法です。

	/* デフォルト:980px以上用(PC用)の記述 */
@media screen and (max-width: 979px) {
	/* 979px以下用(タブレット用)の記述 */
}
@media screen and (max-width: 767px) {
	/* 767px以下用(タブレット/スマートフォン用)の記述 */
}
@media screen and (max-width: 479px) {
	/* 479px以下用(スマートフォン用)の記述 */
}

2. スマートフォン用のスタイルから記述していく方法

デフォルトでスマートフォン用のスタイルを定義し、タブレット/PC用のスタイルをMedia Queriesを使って上書きしていくモバイルファースト的な方法です。

	/* デフォルト:479px以下用(スマートフォン用)の記述 */
@media screen and (min-width: 480px) {
	/* 480px以上用(タブレット/スマートフォン用)の記述 */
}
@media screen and (min-width: 768px) {
	/* 768px以上用(タブレット用)の記述 */
}
@media screen and (min-width: 980px) {
	/* 980px以上用(PC用)の記述 */
}

3. それぞれの画面幅個別に指定する方法
それぞれの画面幅毎に全く別のスタイルを定義する方法です。

@media screen and (min-width: 980px) {
	/* 980px以上用(PC用)の記述 */
@media screen and (min-width: 768px) and (max-width: 979px) {
	/* 768px - 979px用(タブレット用)の記述 */
}
@media screen and (min-width: 480px) and (max-width: 767px)  {
	/* 480px - 767px用(タブレット/スマートフォン用)の記述 */
}
@media screen and (max-width: 479px) {
	/* 479px以下用(スマートフォン用)の記述 */
}

〔SEO Pack〕レスポンシブデザイン簡単導入法01 – ビューポート・メディアクエリ編

ブレークポイントをもう一歩理解。可変するデザインを設計しよう!

〔Mdesign Works〕記述の順番 レスポンシブデザインで使うメディアクエリの設定方法とブレークポイント最適値について 

Follow me!

HTML・CSS

Posted by art