<!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> Thay đổi kích thước phông chữ của một phần tử trên các kích thước màn hình khác nhau </h2>

<div class="example">Hello World!</div>

<p>Khi chiều rộng của trình duyệt rộng từ 600px trở xuống, hãy đặt kích thước phông chữ của DIV thành 30px. Khi nó là 601px hoặc rộng hơn, hãy đặt kích thước phông chữ thành 80px. Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng</p>

</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.