Thiết kế web đáp ứng - Truy vấn phương tiện
Truy vấn phương tiện là gì?
Truy vấn phương tiện là một kỹ thuật CSS được giới thiệu trong CSS3.
Nó sử dụng quy tắc @media để chỉ bao gồm một khối thuộc tính CSS nếu một điều kiện nhất định là đúng.
Ví dụ
Nếu cửa sổ trình duyệt có kích thước 600px trở xuống thì màu nền sẽ là xanh nhạt:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Hãy tự mình thử »Thêm điểm dừng
Trước đó trong hướng dẫn này, chúng ta đã tạo một trang web có hàng và cột và nó phản hồi nhanh nhưng trông không đẹp trên màn hình nhỏ.
Truy vấn phương tiện có thể giúp với điều đó. Chúng ta có thể thêm điểm dừng trong đó các phần nhất định của thiết kế sẽ hoạt động khác nhau ở mỗi bên của điểm dừng.
Máy tính để bàn
Điện thoại
Sử dụng truy vấn phương tiện để thêm điểm dừng ở 768px:
Ví dụ
Khi màn hình (cửa sổ trình duyệt) nhỏ hơn 768px, mỗi cột phải có chiều rộng 100%:
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
Hãy tự mình thử » Luôn thiết kế cho thiết bị di động trước tiên
Mobile First có nghĩa là thiết kế cho thiết bị di động trước khi thiết kế cho máy tính để bàn hoặc bất kỳ thiết bị nào khác (Điều này sẽ giúp trang hiển thị nhanh hơn trên các thiết bị nhỏ hơn).
Điều này có nghĩa là chúng ta phải thực hiện một số thay đổi trong CSS của mình.
Thay vì thay đổi kiểu dáng khi chiều rộng nhỏ hơn 768px, chúng ta nên thay đổi thiết kế khi chiều rộng lớn hơn 768px. Điều này sẽ làm cho thiết kế Mobile First của chúng ta trở nên ưu tiên:
Ví dụ
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Hãy tự mình thử »Điểm dừng khác
Bạn có thể thêm bao nhiêu điểm dừng tùy thích.
Chúng tôi cũng sẽ chèn điểm ngắt giữa máy tính bảng và điện thoại di động.
Máy tính để bàn
Viên thuốc
Điện thoại
Chúng tôi thực hiện điều này bằng cách thêm một truy vấn phương tiện nữa (ở 600px) và một tập hợp các lớp mới cho các thiết bị lớn hơn 600px (nhưng nhỏ hơn 768px):
Ví dụ
Lưu ý rằng hai nhóm lớp gần như giống hệt nhau, điểm khác biệt duy nhất là tên ( col- và col-s- ):
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}Có vẻ kỳ lạ khi chúng ta có hai tập hợp các lớp giống hệt nhau, nhưng nó mang lại cho chúng ta cơ hội trong HTML để quyết định điều gì sẽ xảy ra với các cột tại mỗi điểm ngắt:
Ví dụ về HTML
Đối với máy tính để bàn:
Phần đầu tiên và phần thứ ba sẽ có 3 cột mỗi phần. Phần giữa sẽ trải dài 6 cột.
Đối với máy tính bảng:
Phần đầu tiên sẽ trải dài 3 cột, phần thứ hai sẽ kéo dài 9 cột và phần thứ ba sẽ được hiển thị bên dưới hai phần đầu tiên và nó sẽ trải dài 12 cột:
<div class="row">
<div class="col-3 col-s-3">...</div>
<div
class="col-6 col-s-9">...</div>
<div
class="col-3 col-s-12">...</div>
</div> Hãy tự mình thử »Điểm dừng thiết bị điển hình
Có rất nhiều màn hình và thiết bị có chiều cao và chiều rộng khác nhau nên rất khó để tạo điểm dừng chính xác cho từng thiết bị. Để đơn giản hóa mọi việc, bạn có thể nhắm mục tiêu vào năm nhóm:
Ví dụ
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...} Hãy tự mình thử »Định hướng: Chân dung / Phong cảnh
Truy vấn phương tiện cũng có thể được sử dụng để thay đổi bố cục của trang tùy thuộc vào hướng của trình duyệt.
Bạn có thể có một tập hợp thuộc tính CSS sẽ chỉ áp dụng khi cửa sổ trình duyệt rộng hơn chiều cao của nó, được gọi là hướng "Phong cảnh":
Ví dụ
Trang web sẽ có nền xanh nhạt nếu hướng ở chế độ ngang:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
} Hãy tự mình thử »Ẩn các phần tử với truy vấn phương tiện
Một cách sử dụng phổ biến khác của truy vấn phương tiện là ẩn các thành phần trên các kích thước màn hình khác nhau:
Ví dụ
/* If the screen size is 600px wide or less, hide the element */
@media
only screen and (max-width: 600px) {
div.example {
display: none;
}
}
Hãy tự mình thử »Thay đổi kích thước phông chữ bằng truy vấn phương tiện
Bạn cũng có thể sử dụng truy vấn phương tiện để thay đổi kích thước phông chữ của một thành phần trên các kích thước màn hình khác nhau:
Kích thước phông chữ thay đổi.
Ví dụ
/* If the screen size is 601px or
more, set the font-size of <div> to 80px */
@media only screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px or
less,
set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Hãy tự mình thử »Tham khảo CSS @media
Để biết tổng quan đầy đủ về tất cả các loại phương tiện và tính năng/biểu thức, vui lòng xem quy tắc @media trong tài liệu tham khảo CSS của chúng tôi .
