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 @mediaquy tắc để bao gồm một khối thuộc tính CSS chỉ khi một điều kiện nhất định là đúng.
Thí dụ
Nếu cửa sổ trình duyệt có kích thước 600px trở xuống, màu nền sẽ là màu xanh nhạt:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Thêm một điểm ngắt
Trước đó trong hướng dẫn này, chúng tôi đã tạo một trang web với các hàng và cột và nó có khả năng phản hồi, nhưng nó trông không đẹp trên màn hình nhỏ.
Truy vấn phương tiện truyền thông có thể giúp làm điều đó. Chúng ta có thể thêm một điểm ngắt 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 ngắt.
Máy tính để bàn
Điện thoại
Sử dụng truy vấn phương tiện để thêm điểm ngắt ở 768px:
Thí 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 là 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%;
}
}
Luôn thiết kế cho thiết bị di động đầu 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 tôi phải thực hiện một số thay đổi trong CSS của mình.
Thay vì thay đổi kiểu 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ế của chúng tôi là Thiết bị di động đầu tiên:
Thí 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%;}
}
Một điểm dừng khác
Bạn có thể thêm bao nhiêu điểm ngắt tùy thích.
Chúng tôi cũng sẽ chèn một đ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
Máy tính bảng
Điện thoại
Chúng tôi thực hiện việc 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):
Thí dụ
Lưu ý rằng hai tập hợp các lớp gần như giống hệt nhau, sự 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 nhau, nhưng nó 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ụ HTML
Đối với máy tính để bàn:
Phần đầu tiên và phần thứ ba sẽ kéo dài 3 cột, mỗi phần. Phần giữa sẽ kéo dài 6 cột.
Đối với máy tính bảng:
Phần đầu tiên sẽ kéo 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ẽ kéo 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>
Điểm ngắt thiết bị điển hình
Có rất nhiều màn hình và thiết bị với chiều cao và chiều rộng khác nhau, vì vậy thật khó để tạo ra một điểm dừng chính xác cho từng thiết bị. Để giữ mọi thứ đơn giản, bạn có thể nhắm mục tiêu năm nhóm:
Thí 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) {...}
Đị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 các 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 "Ngang":
Thí dụ
Trang web sẽ có nền màu xanh lam nhạt nếu hướng ở chế độ ngang:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
Ẩn các phần tử với các 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 phần tử trên các kích thước màn hình khác nhau:
Thí dụ
/* If the screen size is 600px wide or less, hide the element */
@media
only screen and (max-width: 600px) {
div.example {
display: none;
}
}
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 phần tử trên các kích thước màn hình khác nhau:
Kích thước phông chữ thay đổi.
Thí 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;
}
}
Tham chiếu CSS @media
Để có cái nhìn 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 .