Quy tắc phương tiện trong css là gì?

Trước đây, việc xây dựng một trang web đơn giản hơn nhiều. Ngày nay, bố cục của trang web không chỉ phải thích ứng với máy tính mà còn cả máy tính bảng, thiết bị di động và thậm chí cả TV

Tạo một trang web có bố cục có thể thích ứng được gọi là Thiết kế web đáp ứng. Và CSS Media Queries là một trong những phần quan trọng nhất của Responsive Design. Trong bài viết này, chúng ta sẽ xem xét kỹ hơn về Media Queries và cách sử dụng chúng trong CSS

Nếu bạn thích, bạn có thể xem phiên bản video dưới đây

Truy vấn phương tiện là gì?

Truy vấn phương tiện là một tính năng CSS3 giúp trang web điều chỉnh bố cục của nó theo các loại phương tiện và kích thước màn hình khác nhau

cú pháp

@media media type and (condition: breakpoint) {
  // CSS rules
}

Chúng tôi có thể nhắm mục tiêu các loại phương tiện khác nhau trong nhiều điều kiện khác nhau. Nếu điều kiện và/hoặc loại phương tiện đáp ứng, thì các quy tắc bên trong truy vấn phương tiện sẽ được áp dụng, nếu không, chúng sẽ không

Cú pháp ban đầu có vẻ phức tạp, vì vậy hãy giải thích chi tiết từng phần một…

@ Quy tắc truyền thông

Chúng tôi bắt đầu xác định các truy vấn phương tiện với quy tắc @media và sau đó bao gồm các quy tắc CSS bên trong dấu ngoặc nhọn. Quy tắc phương tiện @ cũng được sử dụng để chỉ định loại phương tiện đích

@media () {
  // CSS rules
}

dấu ngoặc đơn

Trong ngoặc đơn, chúng tôi đặt một điều kiện. Ví dụ: tôi muốn áp dụng cỡ chữ lớn hơn cho thiết bị di động. Để làm được điều đó, chúng ta cần đặt chiều rộng tối đa để kiểm tra chiều rộng của thiết bị

.text {
  font-size: 14px;
}

@media (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Thông thường, kích thước văn bản sẽ là 14px. Tuy nhiên, vì chúng tôi đã áp dụng truy vấn phương tiện nên nó sẽ thay đổi thành 16px khi thiết bị có chiều rộng tối đa là 480px trở xuống

Quan trọng. Luôn đặt các truy vấn phương tiện của bạn ở cuối tệp CSS của bạn

Loại phương tiện

Nếu chúng tôi không áp dụng loại phương tiện, quy tắc phương tiện @ sẽ chọn tất cả các loại thiết bị theo mặc định. Mặt khác, các loại Phương tiện xuất hiện ngay sau quy tắc phương tiện @. Có nhiều loại thiết bị nhưng chúng ta có thể nhóm chúng thành 4 loại

• tất cả — cho tất cả các loại phương tiện
• in — dành cho máy in
• màn hình — dành cho màn hình máy tính, máy tính bảng và điện thoại thông minh
• lời nói — dành cho trình đọc màn hình “đọc” trang thành tiếng

Ví dụ khi tôi muốn chỉ chọn các màn hình, tôi sẽ đặt từ khóa màn hình ngay sau quy tắc phương tiện @. Tôi cũng phải nối các quy tắc với từ khóa “và”

@media screen and (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Điểm dừng

Điểm ngắt có thể là thuật ngữ phổ biến nhất mà bạn sẽ nghe và sử dụng. Điểm dừng là chìa khóa để xác định thời điểm thay đổi bố cục và điều chỉnh các quy tắc mới bên trong truy vấn phương tiện. Hãy quay lại ví dụ của chúng ta lúc đầu

@media (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Ở đây, điểm dừng là 480px. Bây giờ truy vấn phương tiện biết khi nào nên đặt hoặc ghi đè lên lớp mới. Về cơ bản, nếu chiều rộng của thiết bị nhỏ hơn 480px, lớp văn bản sẽ được áp dụng, nếu không, nó sẽ không

Điểm dừng phổ biến. Có độ phân giải chuẩn không?

Một trong những câu hỏi thường gặp nhất là “Tôi nên sử dụng điểm dừng nào?”. Có rất nhiều thiết bị trên thị trường nên chúng ta không thể và không nên xác định các điểm ngắt cố định cho từng thiết bị

Đó là lý do tại sao chúng ta không thể nói rằng có một độ phân giải tiêu chuẩn cho các thiết bị, nhưng có một số breakpoint thường được sử dụng trong lập trình hàng ngày. Nếu bạn đang sử dụng một khung CSS (như Bootstrap, Bulma, v.v. ) bạn cũng có thể sử dụng các điểm dừng của chúng

Bây giờ hãy xem một số điểm ngắt phổ biến cho độ rộng của thiết bị

• 320px — 480px. Thiêt bị di động
• 481px — 768px. iPad, Máy tính bảng
• 769px — 1024px. Màn hình nhỏ, máy tính xách tay
• 1025px — 1200px. Máy tính để bàn, màn hình lớn
• 1201px và hơn thế nữa —  Màn hình cực lớn, TV

Như tôi đã nói ở trên, các điểm dừng này có thể khác nhau và không có tiêu chuẩn nào được xác định chính xác, nhưng đây là một số điểm thường được sử dụng

kết thúc

Responsive Design là điều bắt buộc trong lĩnh vực thiết kế và phát triển web ngày nay. Truy vấn phương tiện là một trong những phần quan trọng nhất của việc xây dựng bố cục đáp ứng và tôi hy vọng bạn thấy bài đăng của tôi hữu ích để hiểu cách hoạt động của truy vấn phương tiện

Nếu bạn muốn tìm hiểu thêm về phát triển web, vui lòng đăng ký kênh của tôi

Cảm ơn bạn đã đọc

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Cem Eygi

Nhà phát triển giao diện người dùng // Theo dõi tôi trên Youtube. https. //chút. ly/3dBiTUT

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Phương tiện trong CSS là gì?

Mediaquery là gì và khi nào thì sử dụng nó?

Màn hình chỉ @media là gì và là gì?

@media HTML là gì?