Как лучше всего оформить адаптивно характеристики на сайте?

Question

[Антон Вебсайтовский]

Здравствуйте.

Смотрел разные адаптивные интернет магазины, где есть характеристики товара, если сжимать разрешение браузера, ну или зайти с телефона и смотреть весь список характеристик, то все не очень красиво, будто налеплено.

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

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


Смотрел е-каталог, там вообще адаптации нет.
Яндекс маркет, тож характеристики не адаптивны, кто бы мог подумать ) такая фирма.
Проект яндекса и сбербанка беру, тож самое без адаптации.

Comments

[DanKud]

Конкретно в этом случае наверно только уменьшать шрифты в зависимости от разрешения экрана, чтобы не было лишних переносов строк. Делается это с помощью @media-запросов. Базовая документация по этой ссылке - https://www.w3.org/TR/css3-mediaqueries/, но в инете конечно есть масса примеров и туториалов на русском языке. Если в кратце, то просто прописываете в CSS-стили что-то подобное:

@media screen and (min-width: 1400px) { /* при разрешении экрана ниже 1400px выполнить условие */
    html {
        font-size: 14px;
    }
    /* соответственно если шрифты везде в блоках будут прописаны в процентах или в rem
    то они пропорционально уменьшатся */
}

[Антон Вебсайтовский]

DanKud, Это я знаю. Видимо придется блоки вертеть так чтобы все ок было.

Answer 1

[Сергей Горячев]

Как дизайнер нарисует, так и сделать.

Comments

[Антон Вебсайтовский]

Я не про это, а про адаптацию, при сжатии чтобы все ок было, может где-то есть готовые примеры или где-то посмотреть можно.

[Сергей Горячев]

Антон Вебсайтовский, Собственно, о том же я и говорю. Как дизайнер нарисует. Можно перестраивать в одну колонку, можно уменьшать шрифт, можно делать скролл, вариантов дохренища)