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

Question

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

 @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;}
  }

html css responsive-design

1

Quesofat 7 Сен 2016 в 17:14

Answer 1

Вы установили метатег области просмотра в HTML?

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

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

1

Paul Redmond 7 Сен 2016 в 14:23

Answer 2

В моих проектах я использую 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> изменится правильным образом.

0

sandrina-p 17 Окт 2016 в 16:02

Answer 3

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

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

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

0

Rob 7 Сен 2016 в 14:45

Answer 4

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

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

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

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

0

Goodbye StackExchange 7 Сен 2016 в 16:37

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

4 ответа

Похожие вопросы

Новые вопросы

html