Как сделать изменение размера шрифта у сайта фиксированной ширины?

Question

[Александр Владимирович]

Есть страница

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}
#wrap {
width: 980px;
}

<meta name="viewport" content="width=980">
таким образом на всех устройствах страница вписывается по ширине в экран.
Как заставить увеличиться шрифт на маленьких экранах, наподобие такого

/* Small devices (tablets, 768px and up) */
@media (max-width: 768px) {
    font-size: 16px;
}

Answer 1

[Grigruss]

https://learn.javascript.ru/css-units
P.S.: наверное конкретно это

Comments

[Капитан Какао]

Ух ты, круто, давно искал что-то типа такого, но что-то не находил, думал не существуте такой фишки для размера текста)) Спасибо тебе, теперь буду юзать на адаптивных сайтах.

[Grigruss]

Rad Cor: эт все google, я не причем...

[Александр Владимирович]

Григорий: в вашем примере получается чем больше экран, тем больше шрифт, а мне наоборот хотелось увеличить шрифт на маленьком экране

[Grigruss]

Александр Владимирович: можно написать функцию, на том же JS, которая будет выдавать обратно-пропорциональное значение.

Answer 2

[0leg5ergeev]

/* Small devices (tablets, 768px and up) */
@media (max-width: 768px) {
  .class{  font-size: 16px;}
}

Comments

[Александр Владимирович]

Если я указываю meta name="viewport" content="width=980"
то не работает Ваш код, а если указываю meta name="viewport" content="width=device-width, initial-scale=1"
тогда всё работает, но страница не масштабируется устройством под свой размер экрана