Dragon Arrow written by Tatsuya Nakaji, all rights reserved animated-dragon-image-0164

デバイスごとのレスポンシブWebデザインの作成

Mar 04, 2019

Railsにてスマホ、パソコン用でスタイルを使い分ける方法!!


479px以下 => スマホのみ

480~767px => スマホもタブレットもある

768~979px => タブレットのみ

980px以上 => PCのみ


よって...

@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以下用(スマートフォン用)の記述 */
}