Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Как создать Адаптивную страницу самую простую?  [new]
Integrator2
Member

Откуда: Ленинградская область
Сообщений: 131
Как создать Адаптивную страницу самую простую?
На странице Таблица с неким списком, имеющая четыре колонки и четыре строки.
Привидете пожалуйста элементарный пример.
Нужно, чтобы четыре колонки привращались бы в три или в две или в одну при уменьшении ширины экраа.
Может, на стилях CSS, может, на DIV-ах. Или и того и другого?
Спасибо.
30 сен 21, 17:02    [22378029]     Ответить | Цитировать Сообщить модератору
 Re: Как создать Адаптивную страницу самую простую?  [new]
s62
Member

Откуда: Жуковский
Сообщений: 1506
Integrator2,

например на CSS, иcпользуя grid и media query
@media (max-width: 800px) {
...
}
30 сен 21, 18:58    [22378079]     Ответить | Цитировать Сообщить модератору
 Re: Как создать Адаптивную страницу самую простую?  [new]
Integrator2
Member

Откуда: Ленинградская область
Сообщений: 131
Ну, можете написать пример кода HTML пжл. Заранее спасибо)
30 сен 21, 19:14    [22378084]     Ответить | Цитировать Сообщить модератору
 Re: Как создать Адаптивную страницу самую простую?  [new]
vb_sub
Member

Откуда:
Сообщений: 983
на флексах тоже можно.
1 окт 21, 11:52    [22378352]     Ответить | Цитировать Сообщить модератору
 Re: Как создать Адаптивную страницу самую простую?  [new]
s62
Member

Откуда: Жуковский
Сообщений: 1506
Integrator2,

дополнительная подсказка, для задания колонок используется атрибут grid-template-columns.

И можно обойтись без media query: если задать колонки например как-то так:
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
то грид вставит столько колонок, сколько уместится при заданном минимальном размере колонки и текущем размере грида. Т.е. если менять ширину окна браузера, то кол-во колонок будет меняться (если ширина грида при этом меняется).

Сообщение было отредактировано: 1 окт 21, 13:21
1 окт 21, 13:31    [22378432]     Ответить | Цитировать Сообщить модератору
 Re: Как создать Адаптивную страницу самую простую?  [new]
peter64
Member

Откуда:
Сообщений: 221
Integrator2,
https://medium.com/@stasonmars/ве?рстка-на-grid-в-css-полное-руководство-и-справочник-220508316f8b
1 окт 21, 15:01    [22378486]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить