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

Question

[netwbat]

Господа, такой вопрос. Я новенький, и не очень шарю в безумии верстки. Сверстал сайт, с горем пополам. Расставил медиазапросы, Google Chrome полет нормальный на разных разрешениях. Открываю через Сафари, вёрстка плывет, не смертельно, но глаза выдаёт. Ладно, поправил стили для Сафари, плывет Хром или опера. Все префиксы расставил автопрефиксер. Дальше больше, обнаружил, что макбук с разрешением овер 2к грузит стили адаптивки для монитора 1280. Истерика. Что делать, это я идиот или что. Не нашёл в отладчике сафари тулзу, которая, как в Холме, показывает при разных разрешениях. Да и мака у меня нет, как с таким быть? Что почитать, как исследовать такие проблемы и решать их? Заранее большое спасибо, всем, кто не ответит.

Comments

[netwbat]

Извините за ошибки, третья ночь без сна. Тем кто ответит вообще цем)

[netwbat]

MaxKorz: хостинга нет, могу чуть позже доступ подрубить. Но что-то понять в моей каше нереально) бэмом там и не пахнет

[rurobud]

netwbat: сайт статический? Нафиг хостинг, одной командой консоли surge.sh

Answer 1

[Иван Карпущенко]

Проверка на внимательность:
В медиазапросах
min-width: 1280px
или
max-width: 1280px
??

Comments

[netwbat]

Эм, я их вообще не юзал,делал просто; device - width: (разрешение)

[Ankhena]

netwbat:

делал просто; device - width: (разрешение)

т.е. Вы считаете, что браузер пожизненно развернут на весь экран?

[rurobud]

netwbat: жжошь. Переделывай все. А лучше, посвяти хотя бы месяц на изучение основ.

[alvvi]

netwbat: в этом то и ошибка, их юзать надо было

Answer 2

[Алексей Черток]

Используйте 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){}

как для примера использования .. а вообще, лучше приложите элементы верстки которые ползут, мы Вам их подправим

Comments

[Ankhena]

Но и учитывайте, что изначальный контейнер для адаптивной верстки должен быть в процентах.

а и вовсе не обязательно

[rurobud]

Я использую за основу (контейнеры) Flexboxgrid, там нету процентов. Вроде с адаптивностью все впорядке? Оцените резиновость - bent-division.surge.sh

Answer 3

[Vihtori Mallat]

Насчёт макбука.
Мягко интересуюсь, meta viewport с width=device-width указан?
Стоит почитать про device pixel ratio
https://css-tricks.com/snippets/css/retina-display...