@aaamibor
Картограф и программист

Как сделать размеры объекта зависящими от размеров экрана?

Здравствуйте.
Я решил осваивать стек HTML + CSS + JavaScript. Для начала хочу сделать интерактивную Периодическую таблицу Менделеева. И там мне нужно, чтобы размеры каждой ячейки таблицы, а равно и размеры текста, и паддинги с марджинами напрямую зависели от размеров экрана, а также от ориентации. К примеру, на горизонтальном экране "карточки" элементов имеют альбомную ориентацию, а на вертикальном - книжную. И чтобы, опять же, всё меняло размеры пропорционально.
Ясное дело, если делать всё это в CSS, то все-все размеры должны быть не в пикселях, а в процентах. Но процентах от чего?
Или, может, воспользоваться препроцессором типа Less, в самом стиле все размеры сделать переменными и натравить на это дело JavaScript, где все переменные быстренько пересчитаются в красивые цифры?
И ещё такое соображение: если человек смотрит таблицу на совсем маленьком экране (все эти "огромадный", "большой", "маленький", и "мулипусечный", ясное дело, чётко выражаются в пикселях), то само по себе содержимое карточки каждого элемента должно поменяться. Например, русское наименование не нужно, хватит номера, латинского обозначения и атомной массы. То есть, могут меняться не только размеры, но и содержание карточки. Это бы я точно препроцессору поручил. Пусть меняет какой-нибудь там визибл. Точно так же можно поступать при вертикальной ориентации экрана.
В общем, помогите, пожалуйста, советом или просто киньте ссылочку на мануалы/тьюториалы/всякое такое.
...Вспомнил термин "резиновая вёрстка", или как его там. Может, это оно и есть?
  • Вопрос задан
  • 67 просмотров
Решения вопроса 1
@Benchstyle
Если не ошибаюсь, то % - это размер, от размера родительского компонента.
Для резиновой верстки используй виртуальную ширину и высоту экрана (vw, vh):
width: 50vw;
 height: 50vh;

К тому же, если необходимо сделать отображение для разных устройств (пк, планшет, телефон) изучи медиазапросы, например, "@media sreen" для получения разрешения устройства и различных css стилей для каждого типа.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
02 апр. 2020, в 16:07
3000 руб./за проект
02 апр. 2020, в 16:01
5000 руб./за проект
02 апр. 2020, в 15:54
1000 руб./за проект