#media-queries
#css #медиа-запросы
Вопрос:
Я изучаю веб-дизайн (wordpress), поэтому у меня возникают проблемы с медиа-запросами. Я использую сеточную систему Bootstrap 4, поэтому я также использую медиа-запросы bootstrap 4, которые :
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
Я вижу, что этих медиа-запросов недостаточно, особенно с iPhone и Samsung новой серии.
Я вижу, что мне нужно написать дополнительные контрольные точки, чтобы настроить таргетинг на эти мобильные телефоны.
Я сделал поиск в Google и вижу другой тип медиа-запросов, который нацелен на ширину и высоту с webkit-device-pixel-ratio:2 помощью or 3 и т.д. Я также вижу, что есть устройство, ориентированное на медиа-запросы, что меня смущает.
теперь мой вопрос:
если я использую дополнительные точки останова для 375 ширины, 4014 ширины iPhone и т. Д. Будет Достаточно, Или я должен также указать высоту и. webkit-device-pixel ratio
Что вы мне посоветуете? Существует множество мобильных устройств с разными разрешениями.
Комментарии:
1. Я думаю, что в media Query вам нужно сначала сосредоточиться на Galaxy S5, потому что он показывает тот же вид для MotoG, iPhone 6/7/8 и plus, а также Pixel X2. Для iPad вы можете использовать 768 — 1024, а для Ipad Pro и ноутбука 1024 — 1600 / 2000 и для очень больших устройств 2000 или более. Я работаю, используя это, и это работает для меня каждый раз, поэтому я даю вам тот же совет, что и я. Вы можете проверить, а затем сообщить мне, работает ли он для вас или нет.
Ответ №1:
спасибо, я сделал с этим кодом:
@media screen and (min-device-width: 360px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
.site-header {
background-color:brown;
}
}
но когда я открываю в chrome элементы проверки, я вижу, что он нацелен только на Galaxys5 и Moto G4.не iphone или Pixel2.
вы можете увидеть себя на: http://webdesignleren.com /
Спасибо