Медиа-запросы для всех устройств

Question

Есть ли более простой способ сделать мой сайт хорошо выглядеть на разных мобильных устройствах, кроме настройки другого медиа-запроса для всех устройств?

Answer 1

Вы можете использовать медиа-запросы, чтобы сделать сайт отзывчивым, но вы должны настроить для различных экранов, как для Ipad

/* ----------- iPad mini ----------- */ 

/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

/* Portrait */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

/* ----------- iPad 1 and 2 ----------- */ 
/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

/* Portrait */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 1) { 

} 

/* ----------- iPad 3 and 4 ----------- */ 
/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 2) { 

} 

/* Portrait */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 2) { 

} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 2) { 

} 

Аналогично вы можете выглядит для других устройств, таких как ноутбуки, планшеты, мини-телефоны и т.д. Вот статья, в которой указаны размеры всех экранов для экранов СМИ https://css-tricks.com/snippets/css/media-queries-for-standard-devices/. Нет смысла переписывать это снова здесь.

Помимо медиа-запросов, вы можете использовать фреймворки, такие как бутстрап, который уменьшает головную боль при использовании медиа-запросов, вместо этого вы можете просто использовать свои классы, которые предопределили css.

Answer 2

Можете ли вы просто сделать это по ширине?

@media screen and (max-width: 480px) { 
    // CSS Here 
} 

Answer 3

Вы обычно используют несколько медиазапросов: 1200, 992, 768 и, возможно, 480. Это не так много, если вы хотите, чтобы ваш сайт, чтобы быть в полной мере реагировать. Кроме того, вы можете изучать и использовать Bootstrap, который очень помогает в реагировании.