CSSでレスポンス表示にする便利なメディアクエリ一覧!コピペでOK

 

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

 

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

 

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

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

 

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

 

デバイス モニタ横サイズ
iPad Pro(12.9) 1366px
iPad Pro(11) 1194px
iPad Pro(10.5) 1112px
iPad 1024px
iPhone XS Max・XR 896px
iPhone XS・X 812px
iPhone 8・7・6s・6 Plus 736px
iPhone 8・7・6s・6 667px

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

 

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

 

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

 

なぜなら、アクセスされる端末の割合から言うと、今でも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){
}

 
SEO対策、ホームページの相談

\お気軽にお電話ください/


TEL:0942-55-1259

ラインアットで問い合わせる

うちのサイトどう思う?というような事など、お気軽にご相談下さい。


友だち追加
このサイトを運営しているアホな人
制作の中の人

ホントすいません。ハゲですいません。
でも、出来る事を精一杯よりもうちょっと頑張ります。
お仕事いただけると喜びます。

ホームページ制作 福岡市、ホームページ制作 佐賀、ホームページ制作 久留米、ホームページ制作 小郡、ホームページ制作 大牟田、ホームページ制作 八女、ホームページ制作 筑後、ホームページ制作 唐津、ホームページ制作 鳥栖

SEO対策 久留米、SEO対策 佐賀、SEO対策 福岡

といったグーグル検索キーワードで1ページ目に表示させる事を、なんとかかんとかできています。
グーグル検索ユーザー様や、いろんな方やいろんなお客様のご厚意などでお仕事いただけています。

その他
ホームページ制作福岡県福岡市・久留米で集客ならウェブランマンへ