Sử dụng đơn vị "REM"

Sử dụng đơn vị REM cho các thẻ p, h1-h6, a giúp bạn tiết kiệm thời gian khi chỉnh sửa cỡ chữ hàng loạt.

Ví dụ:

:root {
    font-size: 16px;
}

h1 {
    font-size: 2rem;
}

Khi tôi thay đổi font-size gốc thì thẻ <h1> cũng thay đổi theo.

Giả sử:

:root{font-size: 16px;} thì thẻ <h1> sẽ có kích thước 32px.
:root{font-size: 20px;} thì thẻ <h1> sẽ có kích thước 40px.

See the Pen Ex: REM UNIT font-size by ARTRU (@artrublog) on CodePen.

Thay thế đơn vị "px" bằng "%"

Cái này bạn có thể tham khảo chứ không nhất thiết phải chuyển thành đơn vị %.

Khi font-size được đặt cố định bằng px. Nó sẽ giúp layout website không bị xê dịch mặc cho người dùng cài đặt font chữ lớn hơn hay nhỏ hơn mặc định (16px là mặc định của toàn bộ thiết bị), đặc biệt là trên thiết bị di động.

Nếu bạn muốn website tôn trọng font-size của người dùng. Bạn có thể sử dụng đơn vị % để thay thế.

Cụ thể ở đây là 62.5% = 10px khi người dùng để cỡ chữ mặc định.

Dựa trên tỷ lệ đó tôi sử dụng 6.25% = 1px để kết hợp đơn vị REM dễ dàng hơn.

Ví dụ tôi muốn thẻ <h1> có cỡ chữ là 32px thì:

:root{font-size: 62.5%;} thì thẻ h1{font-size: 3.2rem;}.
:root{font-size: 6.25%;} thì thẻ h1{font-size: 32rem;}.

See the Pen Ex: % UNIT font-size by ARTRU (@artrublog) on CodePen.

Tạo font-size Reponsize

Tạo font-size Responsive tức là cỡ chữ sẽ thay đổi theo từng kích thước màn hình.

Bạn có thể set cứng font-size cho từng độ rộng của thiết bị.

Ví dụ:

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, consectetur quas incidunt quibusdam deserunt cum non,
  quasi facere labore repudiandae, mollitia harum dolores sed ad voluptatem adipisci pariatur ex inventore.</p>
<style>
  /* Mobile */
  @media(max-width: 479px) {
    body {
      font-size: 16px;
    }
  }

  /* Tablet */
  @media(min-width: 480px) and (max-width: 1024px) {
    body {
      font-size: 26px;
    }
  }

  /* Desktop */
  @media(min-width: 1025px) {
    body {
      font-size: 40px;
    }
  }
</style>

Tuy nhiên, cách trên sẽ không linh hoạt vì hiện nay có nhiều thiết bị với nhiều kích thước khác nhau.

Tôi sử dụng hàm calc giúp mã ngắn hơn và cơ động hơn trong việc co giãn màn hình.

Hãy truy cập vào công cụ Fluid-responsive property calculator.

Mục Units bạn có thể chọn đợn vị mình muốn. Tôi sẽ sử dụng px.

Mục Range chính là biên độ font-size như trong ví dụ tôi đặt 16px-40px.

Mục Viewport là biên độ kích thước chiều rộng màn hình (width). Tôi sẽ đặt từ 360px-1024px.

Ở mục CSS method bạn chọn ô Clamp. Sau đó bạn chỉ cần copy mã CSS đã được tạo bên dưới.

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, consectetur quas incidunt quibusdam deserunt cum non,
  quasi facere labore repudiandae, mollitia harum dolores sed ad voluptatem adipisci pariatur ex inventore.</p>
<style>
  body {
    font-size: clamp(16px, calc(1rem + ((1vw - 3.6px) * 3.6145)), 40px);
  }
</style>