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.

Tóm Tắt

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

Lệnh @ media là 1 lệnh trong CSS giúp vận dụng những thuộc tính CSS cho từng loại thiết bị đơn cử, 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-width và max-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:

Bạn đang đọc: Hướng dẫn dùng lệnh @media trong CSS

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ừ 0 px đến trên 800 px. 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 hoàn toà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.

Xem thêm: Cách đổi pass modem Wifi trên máy tính, laptop dễ dàng, nhanh chóng

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.

Xem thêm: Hướng dẫn chặn cuộc gọi, tin nhắn trên điện thoại đơn giản

/*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à 780 px. Khi xem ở chính sách tablet và mobile thì menu sẽ không bị ảnh hưởng tác động bởi những đoạn code CSS như trên. Hình dưới đây là menu ở chính sách mobile :

Bài viết hướng dẫn @ media trong CSS để vận dụng riêng không liên quan gì đến nhau 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 những bài viết tiếp theo .

Source: https://final-blade.com
Category: Kiến thức Internet

admin

final-blade.com