Плывет вёрстка на разных браузерах?

Господа, такой вопрос. Я новенький, и не очень шарю в безумии верстки. Сверстал сайт, с горем пополам. Расставил медиазапросы, Google Chrome полет нормальный на разных разрешениях. Открываю через Сафари, вёрстка плывет, не смертельно, но глаза выдаёт. Ладно, поправил стили для Сафари, плывет Хром или опера. Все префиксы расставил автопрефиксер. Дальше больше, обнаружил, что макбук с разрешением овер 2к грузит стили адаптивки для монитора 1280. Истерика. Что делать, это я идиот или что. Не нашёл в отладчике сафари тулзу, которая, как в Холме, показывает при разных разрешениях. Да и мака у меня нет, как с таким быть? Что почитать, как исследовать такие проблемы и решать их? Заранее большое спасибо, всем, кто не ответит.
  • Вопрос задан
  • 1742 просмотра
Пригласить эксперта
Ответы на вопрос 3
Проверка на внимательность:
В медиазапросах
min-width: 1280px
или
max-width: 1280px
??
Ответ написан
BarnyBroken
@BarnyBroken
Дизайнер, веб-разработчик.
Используйте media для компоновки дизайна на широтам браузеров.
Но и учитывайте, что изначальный контейнер для адаптивной верстки должен быть в процентах.

Например:
.pageWrapper { width: 100%; max-width: 1600px; margin: 0 auto; }


Соответственно и media:

@media screen only (max-width: 1600px){}
@media screen only (max-width: 1300px){}
@media screen only (max-width: 1000px){}
@media screen only (max-width: 700px){}
@media screen only (max-width: 400px){}


как для примера использования .. а вообще, лучше приложите элементы верстки которые ползут, мы Вам их подправим
Ответ написан
@mallat
Web & iOS developer
Насчёт макбука.
Мягко интересуюсь, meta viewport с width=device-width указан?
Стоит почитать про device pixel ratio
https://css-tricks.com/snippets/css/retina-display...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы