Как создать Адаптивную страницу самую простую? / HTML, JavaScript, VBScript, CSS

2.0.48

Планшетная версия Контакт Правила FAQ Помощь

Гость

Нов. | Гор. | Избр.

Действия ...

Доб. в избранное
Игнор. тему
Прикреп. тему
Пометить прочит. / непрочит.
Фильтр:
Сообщения автора темы
Сообщение содержит вложения
Сообщение содержит картинки
Сообщение содержит видеоклипы
Сообщение содержит аудиоклипы
Сообщение содержит картинки или видео 18+

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как создать Адаптивную страницу самую простую? / 6 сообщений из 6, страница 1 из 1

30.09.2021, 17:02

#40101047

Integrator2

Гость

Как создать Адаптивную страницу самую простую?

Как создать Адаптивную страницу самую простую?
На странице Таблица с неким списком, имеющая четыре колонки и четыре строки.
Привидете пожалуйста элементарный пример.
Нужно, чтобы четыре колонки привращались бы в три или в две или в одну при уменьшении ширины экраа.
Может, на стилях CSS, может, на DIV-ах. Или и того и другого?
Спасибо.

...

Рейтинг:

0 / 0

| Ответить | Цитировать | Написать

30.09.2021, 18:58

#40101085

s62

Участник

Откуда: Жуковский
Сообщения: 1 527
Рейтинг: 0 / 0

Как создать Адаптивную страницу самую простую?

Integrator2,

например на CSS, иcпользуя grid и media query

Код: css

1.
2.
3.

@media (max-width: 800px) {
...
}

...

Рейтинг:

0 / 0

| Ответить | Цитировать | Написать

30.09.2021, 19:14

#40101090

Integrator2

Гость

Как создать Адаптивную страницу самую простую?

Ну, можете написать пример кода HTML пжл. Заранее спасибо)

...

Рейтинг:

0 / 0

| Ответить | Цитировать | Написать

01.10.2021, 11:52

#40101254

vb_sub

Участник

Сообщения: 1 039
Рейтинг: 0 / 0

Как создать Адаптивную страницу самую простую?

на флексах тоже можно.

...

Рейтинг:

0 / 0

| Ответить | Цитировать | Написать

01.10.2021, 13:31

#40101314

s62

Участник

Откуда: Жуковский
Сообщения: 1 527
Рейтинг: 0 / 0

Как создать Адаптивную страницу самую простую?

Integrator2,

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

И можно обойтись без media query: если задать колонки например как-то так:

Код: css

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

то грид вставит столько колонок, сколько уместится при заданном минимальном размере колонки и текущем размере грида. Т.е. если менять ширину окна браузера, то кол-во колонок будет меняться (если ширина грида при этом меняется).

...

Рейтинг:

0 / 0

| Ответить | Цитировать | Написать

01.10.2021, 15:01

#40101355

peter64

Участник

Сообщения: 233
Рейтинг: 0 / 0

Как создать Адаптивную страницу самую простую?

Integrator2,
https://medium.com/@stasonmars/ве?рстка-на-grid-в-css-полное-руководство-и-справочник-220508316f8b

...

Рейтинг:

0 / 0

| Ответить | Цитировать | Написать

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

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

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?fid=22&mobile=1&tid=1443188]:	0ms
get settings:	10ms
get forum list:	12ms
check forum access:	4ms
check topic access:	4ms
track hit:	32ms
get topic data:	11ms
get forum data:	2ms
get page messages:	41ms
get tp. blocked users:	1ms
others:	241ms

total:	358ms