レスポンシブ 覚書き

横幅でグルーピング

グループ１

(320px=100%)
320px : iPhone5S

グループ２

360px : Nexus5
(360px=100% 以降は両サイドに空白)
375px : iPhone6
412px : Nexus6
414px : iPhone6S
540px : Xperia acro HD

グループ３

600px : Nexus7
(600px=100% 以降は両サイドに空白)
720px : GALAXY S III
768px : iPad, iPad mini, Nexus9
800px : Nexus10, GALAXY Note

グループ４

(960px=100% 以降は両サイドに空白)
960px～ : PC他

CSS メディアクエリサンプル

@media screen and (max-width: 359px) {
}
@media screen and (min-width: 360px) and (max-width: 599px) {
}
@media screen and (min-width: 600px) and (max-width: 959px) {
}
@media screen and (min-width: 960px) {
}