Как изменять размер текста, когда разрешение экрана достигнет мобильного?

Question

[Rulon Oboevv]

Здравствуйте
верстаю на буте, и такой вопрос, как манипулировать размером текста, в разных разрешениях экрана?
просто если размер текста в мобильной версии будет размером экранов монитора , то это провал.
Вопроса точного никто не понял. Вот на картинках объясняю
На 1 картинке в таком размере экран другого размера.
А если растянуть его размер изменяется.

Answer 1

[Сергей delphinpro]

https://jsfiddle.net/4vwwuwg0/

html {
  font-size: 100%;
}

h1 {  font-size: 3rem; }

/*
 Чтобы текст не получился слишком мелким,
 используем calc
 Это типа min-font-size =)
*/
p { font-size: calc(12px + 0.25rem); }

@media (max-width: 480px) {
  html {
    font-size: 50%;
  }
}

Comments

[Rulon Oboevv]

спс.

Answer 2

[iBird Rose]

используешь везде em для font-size, а для body в px. потому в медиа запросах меняешь шрифт у body - и у тебя меняются все размеры шрифтов на сайте.

Comments

[Rulon Oboevv]

т.е в body я ставлю какой то размер текста, а в font-size: в em? но мне ведь нужно чтобы этот текст был больше остальных, в баре у меня 12px размер, а с тем что работаю 25рх.

[iBird Rose]

Эрик Филлер: гугли про em https://jsfiddle.net/Lp17ycph/

Answer 3

[Иван Бабий]

Используй vmin, vmax, em, vw, vh, % для всех элементов сайта и горя знать не будешь. Про px вообще забудь, если делаешь сайт под все устройства