Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 26.11.2021, 14:30   #1
Marselo
Новичок
Джуниор
 
Регистрация: 26.11.2021
Сообщений: 2
Печаль Адаптировать под себя шрифт css

Добрый день!
Нашел статью, в которой говориться о моей проблеме, но не могу адаптировать под себя.

Необходимо сделать в css:
Размер шрифт в зависимости от экрана. Экран 0-1199px размер шрифта 10px, когда размер экрана больше 1200px размер шрифта 0.67vw.

Нашел вот такое:
Цитата:
А теперь самое интересное: имея CSS функцию calc() и текущее значение вьюпорта благодаря vw можно получить динамический размер шрифта:


font-size: calc( (100vw - Vmin)/(Vmax - Vmin) * (Fmax - Fmin) + Fmin);

Эту формулу уже можно использовать в чистом CSS. Только нужно помнить, что при операциях умножения/деления хотя бы один из аргументов должен быть без единиц измерения, а при сложение/вычитании — оба с единицами. Подставив наши значения получим рабочий вариант (обратите внимание на использование единиц измерения):


font-size: calc( (100vw - 480px)/(1280 - 480) * (24 - 16) + 16px);

....

Теперь при ширине экрана меньше 480px шрифт всегда будет 16px, после 480 он станет резиновым, а после 1280px всегда будет 24px.
И не могу под себя подстроить...
Marselo вне форума Ответить с цитированием
Старый 26.11.2021, 16:09   #2
Marselo
Новичок
Джуниор
 
Регистрация: 26.11.2021
Сообщений: 2
По умолчанию

ВОТ ОТВЕТ

Код:
@media only screen and (min-width: 1200px) {
                .text {
                    font-size: 0.67vw;
                }
            }
            @media only screen and (max-width: 1199px) {
                .text {
                    font-size: 10px;
                }
            }
Marselo вне форума Ответить с цитированием
Старый 08.12.2021, 12:14   #3
sklees
Пользователь
 
Регистрация: 21.04.2013
Сообщений: 23
По умолчанию

Код:
ширина: <span id="screenW"></span>px<br>
высота: <span id="screenH"></span>px
<script>
document.getElementById('screenW').innerHTML = $(window).width();
document.getElementById('screenH').innerHTML = $(window).height();
window.addEventListener("resize", correctScreen);
function correctScreen() {
document.getElementById('screenW').innerHTML = $(window).width();
document.getElementById('screenH').innerHTML = $(window).height();
}
</script>
реальные ширина (высота) не 480px и не 1280px
sklees вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как адаптировать карту? (под мобильник) Canavaros HTML и CSS 0 07.01.2020 12:25
Не могу адаптировать сайт под мобильные устройства ValeriiM Общие вопросы Web 1 09.04.2018 08:37
адаптировать под лампанель программу макс789 Assembler - Ассемблер (FASM, MASM, WASM, NASM, GoASM, Gas, RosAsm, HLA) и не рекомендуем TASM 0 16.12.2016 21:19
Адаптировать консольную программу под форму free6878 Помощь студентам 0 01.01.2011 14:29
Как адаптировать вкладки под свои нужды !!! 333_org_ua JavaScript, Ajax 0 05.12.2010 16:04