本日はレスポンシブのサイトを制作する際のCSSでのMedia Queriesの指定数値について考えてみました。
多くの人に綺麗な状態でウェブサイトを見てもらうために、CSS内で画面の横幅の数値を定め、その値以下(または以上)でデザインの指定を変えていく方法です。
まず、日本人が使っているスマートフォンの種類について調べてみました⭐️

https://webrage.jp/techblog/sp_share/
上記のサイトによると、2017年6月の日本で使用されているスマートフォンのシェア率は以下になっています。

順位	機種名	名前	メーカー	シェア率
1位	iPhone	iPhone	Apple	63.24%
2位	SO-02G	Xperia Z3 Compact	SONY	1.25%
3位	SO-01J	Xperia XZ	SONY	1.14%

 
iPhoneでサイトを閲覧する人が大多数です。
また、8位までSONYのXperia、3位以下のスマートフォンのシェア率は1%を切っていることから、上記の機種を意識して作れば日本で見られるスマートフォンに対応したレスポンシブサイトが作れるといえます。
 

画面幅一覧

iphone5	iphone6	iphone6+	ipadmini	Xperia
320px	375px	414px	768px	360px

 

どのスマートフォンデバイスからみても崩れがなく、きれいなウェブサイトをつくるには、Media Queriesのcss指定数値を上記の主要な画面幅に設定すればいいと思います!
表示チェックをおこない、特定のデバイスで余白などが思ったような表示がされない…といった場合には個別で細かく指定してあげることで解消できるとおもいます😀✨