Trang chủ » Media Queries là gì? Cú pháp của media query

Media Queries là gì? Cú pháp của media query

Đinh Thao 13 Th10, 2021

Với vô số thiết bị, trình duyệt web và kích thước của màn hình khác nhau , chúng ta cần có một cách để dễ dàng phát hiện cách chúng ta muốn bố trí một trang web sao cho bố cục, kích thước phù hợp với màn hình phương tiện đó là Media queries. Vậy Media queries là gì?

Media queries là gì?

Media queries là gì

Media queries là gì

Media Queries : Truy vấn phương tiện là một kỹ thuật CSS, được giới thiệu trong CSS3.  Cho phép kết xuất nội dung để thích ứng với các điều kiện như độ phân giải màn hình .

Tháng 6 năm 2012 Media Queries trở thành một tiêu chuẩn được đề xuất của W3C, là một công nghệ nền tảng của thiết kế web đáp ứng (RWD).

Với Media Queries thì bạn có thể định dạng cách hiển thị trang web sao cho nó hiển thị Responsive trên nhiều kích cỡ trình duyệt khác nhau.Ví dụ thiết bị là Desktop trở lên thì độ rộng tối thiểu của màn hình  @min-width  phải là 1024px Tablet để đứng thì có độ rộng tối thiểu 768px và cao nhất là 1024px trên Smartphone thì tối đa là 767px.

Như vậy nghĩa là khi bạn dùng thiết bị nào để xem trang web thì media queries sẽ tự đối chiếu và đưa ra định dạng trang web tương ứng với kích cỡ của màn hình.

Cú pháp của media query:

Cú pháp của media query

Cú pháp của media query

Media query là một tập hợp các truy vấn, chúng bao gồm:

Media type (optional)

Một vài biểu thức media features

Các mệnh đề truy vấn media type và media features được kết hợp với nhau bởi các toán tử logic. Trong media query, cú pháp sẽ không phân biệt chữ hoa và chữ thường.

Khi mệnh đề truy vấn trả về kết quả True. Trình duyệt sẽ áp những CSS rules bên trong cho tài liệu HTML.

Mệnh đề truy vấn media type

Media type được giới thiệu ở phiên bản thứ 2 của CSS. Với cú pháp @media chúng ta có thể chỉ định những files hay rules CSS cụ thể cho một loại thiết bị. Ví dụ: Đối với hóa đơn điện tử  sử dụng mệnh đề truy vấn media type nó sẽ cho ra kết quả chúng ta xem trực tiếp trên web có 1 giao diện khác và khi in có 1 giao diện khác.

Ở CSS3 chúng ta chỉ có thể truy vấn 1 trong 4 loại: all, screen, print và speech.

Media features:

Media features mô tả đặc điểm của người dùng bao gồm các thông số:

Any-hover, any-pointer, aspect-ratio, Color, Color-gamut, Color-index, Display-mode, Forced-colors, Grid, Height, Hover, Inverted-colors, Light-level, monochrome, orientation, overflow-block, overflow-inline, pointer, prefers-color-scheme, prefers-contrast, prefers-reduced-transparency, resolution, scan, scripting, update, width.

Media features hỗ trợ rất nhiều thuộc tính. Nhưng ở mức độ căn bản, chúng ta chỉ cần quan tâm chủ yếu đến 4 thuộc tính:

width: độ rộng của viewport

height: độ cao của viewport

resolution: độ phân giải của màn hình (mật độ của các điểm ảnh)

orientation: hướng của thiết bị (dành cho các thiết bị di động, chúng ta có thể xoay ngang và xoay dọc)

Các toán tử logic:

Chúng ta có thể kết hợp nhiều mệnh đề bằng các toán tử logic. Media query hỗ trợ các toán tử and, not, only và (comma)

Câu truy vấn đầu tiên:

Tùy vào từng tình huống cụ thể trong thực tế mà câu truy vấn media có rất nhiều biến thể như:

Câu truy vấn đơn giản

   color: red;

}

@media (min-width: 992px) {

    h1 {

        color: blue;

Biểu thức ‘min-width: 992px‘ có nghĩa là độ rộng của viewport  >= 992px, thì biểu thức này trả về True. Ngoài min-width, chúng ta cũng có thể sử dụng biểu thức max-width với cách thức tương đương. Nếu các bạn mở ví dụ bằng bằng laptop hoặc PC có màn hình lớn hơn 992px. Tiêu đề sẽ có màu xanh. Nhưng khi các bạn kéo nhỏ cửa sổ trình duyệt web lại. Tiêu đề sẽ chuyển sang màu đỏ.

Kết hợp 2 biểu thức truy vấn:

  color: red;

}

@media (min-width: 768px) and (orientation: landscape) {

    h1 {

        color: blue; }

   Như các bạn thấy biểu thức này sử dụng toán tử and để kết hợp 2 biểu thức truy vấn lại với nhau. Ví dụ ở đây chúng ta sử dụng màn hình iPad Pro có kích thước 1024×1366 px. Vậy dùng để màn hình đứng (portrait) hay ngang (landscape) thì mệnh đề (min-width: 768px) luôn đúng. Do đó, kết quả của câu truy vấn sẽ phụ thuộc vào mệnh đề còn lại ‘(orientation: landscape)‘ sẽ quyết định giá trị.

Đối với giao diện dành cho những thiết bị màn hình lớn bao giờ cũng chứa những hình ảnh với kích cỡ to, và độ phân giải cao hơn so với những thiết bị màn hình nhỏ vì vậy bạn nên hiểu Media Query là gì để cho ra độ phân giải tốt nhất đối với các màn hình lớn nhé.

 

Đinh Thao

Đinh Thao

Tôi là Đinh Thị Thao, hiện đang là giáo viên giảng dạy tại trung tâm testerpro và cũng là tác giả chính các bài blog liên quan đến tester, ngành công nghệ thông tin tại trên trang testerpro.vn. Với 5 năm kinh nghiệm làm việc, giảng dậy tại trung tâm thì tôi hy vọng sẽ có thể truyền tải cho các bạn những kiến thức tốt nhất của tester giúp các bạn phục vụ trong công việc của bản thân.

Từ khóa:
Bình luận
Icon Phone Icon Zalo