Result Size: 300 x 150
x
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
  background-color: lightgrey;
  padding: 20px;
}
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}
</style>
</head>
<body>
<h2>Изменение размера шрифта элемента на разных размерах экрана</h2>
<div class="example">Пример DIV.</div>
<p>Если ширина браузера составляет 600 пикселей или меньше, установите размер шрифта DIV равным 30 пикселей. Если он составляет 601 пиксель или больше, установите размер шрифта на 80 пикселей. Измените размер окна браузера, чтобы увидеть эффект.</p>
</body>
</html>