Как сделать адаптацию сайта?

Question

[Ярослав Опалинский]

всем привет, не давно я сделал сайт и загрузил его на хост, у меня он открывался нормально, но открывая ты же ссылку на других компьютерах с другой диагональю экранов сайт показывался не корректно, как исправить?

если надо вот ссылка на песочницу с кодом главной страницы сайта: https://jsfiddle.net/vkr6wte0/

Comments

[Ankhena]

другой диагональю экранов

Диагональ тут не при чем.
Если вы свой монитор повернете на 90 градусов, размер диагонали останется, а вот изображение изменится.

Вам нужно почитать про адаптивную верстку. (На самом деле не только про нее)

- поставить соответствующий meta viewport
- использовать флексы и гриды
- могут пригодится относительные единицы измерения, такие как %, em, rem, vw, vh. vmin, vmax (это не значит, чт нельзя использовать px при адаптиве)
- использовать @media для перестроения блоков при разных размерах окна, ориентации устройства и т.д.

Это очень кратко. Тут можно написать небольшую брошюру, но всё это уже написано в различных статьях.

Answer 1

[Ankhena]

Простейшая вариация
https://jsfiddle.net/pd7segt0/

Только у себя в head добавьте

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

без него @media не будут работать.

Comments

[Ярослав Опалинский]

а без изменения дизайна никак да(?

[Ярослав Опалинский]

адаптация работает, но изменился дизайн самого сайта и мой внутренний перфекционист плачет от того как стоят кнопки сейчас))

[Ankhena]

Ярослав Опалинский, да, пожалуйста, вы можете задать, чтобы всегда было 2 столбца.
Или 2 столбца на десктопах и 1 на мобилках.
Или как-то еще как желает ваша душа.

Изучайте, изменяйте.

но изменился дизайн самого сайта

Я бы поостереглась применять тут слово дизайн.

Answer 2

[Art005]

Это называется адаптивная верстка

Comments

[Ярослав Опалинский]

исправить мою ошибку это все ровно мне не поможет, но спасибо, буду знать

[Антон]

Ярослав Опалинский, какую ошибку? Тут вообще всё надо переписывать!
Добавить

<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">

, убрать кучу box3,4,5...., дивы в ссылках, css одинаковый в один класс нужно сделать...
Задать себе вопрос: если у меня смартфон 411 пикселей по ширине, то могу ли я делать так: padding = 480px? Или чего я жду если все элементы выстрою в один ряд и сделаю ширину каждого по 500px?

[Ярослав Опалинский]

Антон,

убрать кучу box3,4,5...., дивы в ссылках, css одинаковый в один класс нужно сделать...

это нужно что бы просто код был чище? или это влияет еще на что-то?

Задать себе вопрос: если у меня смартфон 411 пикселей по ширине, то могу ли я делать так: padding = 480px? Или чего я жду если все элементы выстрою в один ряд и сделаю ширину каждого по 500px?

не совсем понял ход ваших мыслей, что вы имели в виду?

Answer 3

[Антон]

Ярик и Саша, Делаем адаптивный HTML

Comments

[Ярослав Опалинский]

спасибо XD, если получится отмечу решением В)

Answer 4

[xmoonlight]

Добавлю свой вариант со шрифтом (параметры и сегментацию по сетке - подберите сами).

div[class^="box"] {
  font-size: calc(24px + 0.7 * (1vh - 1.6vw));
}

Добавить в самый низ CSS файла.