Hướng dẫn dùng lệnh @media trong CSS

Hiện nay, việc thiết kế website phải đáp ứng được yêu cầu về tính tương thích thiết bị (responsive). Do đó, việc thể hiện các thành phần của website ở mỗi kích thước màn hình có thể khác nhau. Và đó là lý do mà bạn cần nắm được lệnh @media trong CSS để tùy chỉnh website responsive.

1. Lệnh @media là gì?

Lệnh @media là 1 lệnh trong CSS giúp áp dụng các thuộc tính CSS cho từng loại thiết bị cụ thể, dựa trên:

  • Chiều rộng của màn hình (phổ biến nhất)
  • Chiều cao của màn hình
  • Độ phân giải màn hình

Nhằm mang đến kiến thức thực tế và đơn giản nhất, mình sẽ chỉ đề cập phần min-widthmax-width. Các bạn có nhu cầu tìm hiểu kỹ hơn có thể xem trên W3SCHOOL.

2. Tùy chỉnh CSS dựa theo độ rộng của thiết bị bằng @media

Các bạn xem ví dụ bên dưới và chúng ta sẽ cùng phân tích:

body {
  background-color: lightblue;
}

@media screen and (min-width: 400px) {
  body {
    background-color: lightgreen;
  }
}

@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
  }
}

Trong phần code CSS ở trên, độ rộng thiết bị được chia thành 3 phần. Từ 0px đến trên 800px. Cụ thể:

  • Khi độ rộng của thiết bị dưới 400px, background-color của body màu lightblue.
  • Khi độ rộng của thiết bị từ 400px đến dưới 800px, background-color của body màu lightgreen.
  • Khi độ rộng của thiết bị từ 800px trở lên, background-color của body màu lavender.

Các bạn có thể dựa vào phần ví dụ và đoạn code mẫu dưới đây để dùng cho mình:

/*Cú pháp dùng cho thiết bị có độ rộng từ 800px trở lên*/
@media screen and (min-width: 800px) {
.ten-class-nao-do{
  display:none; /*chèn thuộc tính CSS vào đây*/
}

/*Cú pháp dùng cho thiết bị có độ rộng từ 800px trở xuống*/
@media screen and (max-width: 800px) {
.ten-class-nao-do{
  display:none; /*chèn thuộc tính CSS vào đây*/
}

/*Cú pháp dùng cho thiết bị có độ rộng từ 400px đến 800px*/
@media screen and (min-width: 400px) and (max-width:800px){
.ten-class-nao-do{
  display:none; /*chèn thuộc tính CSS vào đây*/
}

3. Kết quả áp dụng

Hình dưới đây là mình áp dụng @media cho phần menu chính ở màn hình PC.  Các bạn xem hình và xem code cụ thể ở phía dưới.

Phần menu này mình dùng Elementor nên nếu bạn nào dùng Elementor thì có thể áp dụng trực tiếp luôn nha.

/*Chỉnh menu*/
@media only screen and (min-width: 780px){
    .elementor-nav-menu .menu-item{
    border: 1px solid #ddd;
    background-color:#A02C28;
    border-radius: 10px !important;
    }
.elementor-nav-menu .menu-item:hover{
    border: 1px solid #F1B33B;
    background-color:#A02c28;
    border-radius: 10px;
    }
.elementor-nav-menu .current-menu-item{
    border: 1px solid #F1B33B !important;
    background-color:#87231D !important;
    border-radius: 10px !important;
    }
}

Mình đã dùng @media để giới hạn độ rộng thấp nhất là 780px. Khi xem ở chế độ tablet và mobile thì menu sẽ không bị ảnh hưởng bởi các đoạn code CSS như trên. Hình dưới đây là menu ở chế độ mobile:

Bài viết hướng dẫn @media trong CSS để áp dụng riêng biệt cho từng thiết bị đến đây là hết. Cảm ơn đã đọc bài viết của No Code Building. Hẹn gặp lại trong các bài viết tiếp theo.

Share on facebook
Share on tumblr
Share on twitter
Share on linkedin

Bài viết liên quan

Marketing quà tặng

Đối tác liên kết

0989 333 069
Chat Zalo