ブレイクポイントってどうすればいいのか難しいですよね。

 

デザインをする上で、レスポンシブにするために、どこのサイズでブレイクスルーすればいいのか判断がしにくいという人向けに、簡単にコピペして使えるメディアクエリの一覧を紹介します。

 

と、その前に、現在の主要なアイフォンやアイパッドののモニタの横幅を軽く紹介します。

見ていただくとわかるように、細かくサイズが違う為、ブレイクポイントが複数必要になるようになってきました。

 

また、こちらに書いているのはアイフォンとアイパッドだけなので、アンドロイド端末も含めると、ブレイクポイントがたくさん必要になり、デザインの調整もとても大変になります。

 

デザインの設計も、縦横が関係するようなデザインはなるべくしないようにする事が良いのかもしれません。

 

集客が必要無い団体や会社、アーティストのサイトなどでは、がっちりデザインする必要はあると思いますが、それ以外の集客売り上げメインのサイトの場合は、横幅のサイズによってある程度形が決まるようなデザインで納めるというのも一つの方法かもしれません。

 

弊社の場合は、作成コストを下げる為に、下記のブレイクスルーポイントしか用意していません。

 

なぜなら、アクセスされる端末の割合から言うと、今でもPC　タブレット　スマホ　という3種類で十分な感じ のアクセスしか来ていないように思われます。

 

このあたりは、依頼主の予算や、制作意図などがかかわってくるので、それぞれで考える場所かなと思います。

 

コピペでいけるレスポンシブメディアクエリの一覧

ワンセットでコピぺでそうぞ。

順番もこの通りに張り付ければ順番に、必要なCSSを書き込んでいけばいいです。

 

/*1240px以上のモニタサイズの時　PCモニタレスポンス用*/
@media screen and (min-width: 1240px){
}

/*1030px以下のモニタサイズの時　主にタブレット*/
@media screen and (max-width: 1030px){
}

/*768px以下のモニタサイズの時　主にタブレットとスマホの横向き*/
@media screen and (max-width: 768px){
}

/*480px以下のモニタサイズの時　主にスマートフォンの縦*/
@media screen and (max-width: 480px){
}