R
R
Rulon Oboevv2017-01-22 09:36:31
Bootstrap
Rulon Oboevv, 2017-01-22 09:36:31

How to resize text when screen resolution reaches mobile?

Hello
, I'm typesetting on boot, and the question is how to manipulate the text size in different screen resolutions?
it's just that if the text size in the mobile version is the size of the monitor screens, then this is a failure.
Nobody really understood the question. Here in the pictures I explain
. In 1 picture in this size, the screen is of a different size.
And if you stretch its size changes.
b3c7ff22821d460ca71e43b8be4d64ad.png6187b42c85ce42f68f8871f5594d2796.png

Answer the question

In order to leave comments, you need to log in

3 answer(s)
S
Sergey delphinpro, 2017-01-22
@the_guyfox

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

I
iBird Rose, 2017-01-22
@iiiBird

you use em everywhere for font-size, and for body in px. that's why in media queries you change the font of the body - and you change all the font sizes on the site.

I
Ivan Babiy, 2017-01-22
@roblip

Use vmin, vmax, em, vw, vh, % for all site elements and you won't know grief. Forget about px if you make a website for all devices

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question