Медиа-запросы для отзывчивой типографии

Я пытаюсь найти способ сделать мою типографию отзывчивой. Мой код будет следовать. Всякий раз, когда я обновляю инструменты dev, это, похоже, не имеет желаемого результата. Как я могу получить хороший результат, чтобы текст хорошо отображался на телефонах, планшетах и ноутбуках/настольных компьютерах?Медиа-запросы для отзывчивой типографии

@media only screen and (min-width: 320px) 
    { 
    html {line-height: 1.25em, font-size: 16px;} 
    h1{line-height: 1.25em, font-size:32px;} 
    h2{line-height: 1.15384em, font-size:26px;} 
    h3{line-height: 1.136363em, font-size:22px;} 
    h4{line-height: 1.111111em, font-size:18px;} 
    }

источник

2016-09-07 Quesofat

Вы установили метатег вашего вида в своем HTML?

<meta name="viewport" content="width=device-width, initial-scale=1">

Кроме того, почему бы вам не использовать REM для этого, чтобы сделать его более простым? Вы можете указать начальный размер шрифта html и высоту строки, а затем изменить значение REM для каждого запроса. Read: https://css-tricks.com/confused-rem-em/

источник

2016-09-07 14:23:06

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

Когда вы расширяете окно браузера, и оно начинает выглядеть плохо, это ваша точка останова, когда нужно изменить значения, используя медиа-запросы или javascript. На самом деле, есть библиотека javascript, которая поможет вам делать такие вещи (но имя ускользает от меня в данный момент).

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

источник

2016-09-07 14:45:33 Rob

Вы можете использовать функцию css calc.

font-size: calc(1em + 1vw);

Как говорили здесь

https://www.reddit.com/r/web_design/comments/4hhs53/responsive_typography_root_fontsize_calc1vw_1vh/

источник

2016-09-07 16:29:40

Я использую rem вместо em На моих проектах. Разница между ними заключается в том, что rem всегда смотрит в корень документа, в данном случае html.

Тогда на моей CSS я есть:

html { 
    font-size: 1rem; 

    @media (min-width: 320px) { 
     font-size: 1.2rem; 
    } 

    @media (min-width: 760px) { 
     font-size: 1.5rem; 
    } 
}

Таким образом, все font-size внутри <html> изменится в правильном направлении.

источник

2016-10-17 16:02:35

Медиа-запросы для отзывчивой типографии

ответ

Смежные вопросы