Как сделать адаптивным сайт для мобильных?

Question

[Дмитрий Коробейников]

Добрый вечер.

Как мне настроить код css так, что бы он корректно отображался на всех мобильных устройствах?
Я вот о чем. Есть достаточно сервисов, которые подгоняют твой сайт под разные разрешения, тем самым проверяя адаптивность. Но есть серивис (тык), который не просто подгоняет размеры, но еще, непосредственно, открывает твой сайт на указанном ПО через (как я понял) виртуальную машину.
Поэтому, когда я открываю свой сайт через этот сервис, экран эмулированного айфона не отображает мой сайт, а только стопку элементов без css стилизации.

Answer 1

[Odisseya]

Проверьте прописан ли у вас в html

<meta name="viewport" content="width=device-width,initial-scale=1">

или подобное правило. Это нужно, чтобы стили реагировали на условия в медиавыражениях.

Answer 2

[zoozag]

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

В этом самом сервисе есть возможность посмотреть инспектор браузер и проверить подгрузились ли ваши стили.

Answer 3

[Dima Polos]

Учиться, учиться адаптивной верстке. Надо знать медиа запросы, сетку, флоаты, инлайн блоки, флексы.
https://m.youtube.com/watch?v=_g4NnnZdTxQ
https://m.youtube.com/watch?t=7s&v=Au6d1d-vFjU
Если правильно разметку сделать и css правильно распределить, то сама адаптивка уже несложно делается.