Truy vấn phương tiện CSS - Ví dụ
Truy vấn phương tiện CSS - Ví dụ khác
Chúng ta hãy xem xét thêm một số ví dụ về cách sử dụng truy vấn phương tiện.
Truy vấn phương tiện là một kỹ thuật phổ biến để cung cấp biểu định kiểu phù hợp cho các thiết bị khác nhau. Để minh họa một ví dụ đơn giản, chúng ta có thể thay đổi màu nền cho các thiết bị khác nhau:
Ví dụ
/* Set the background color of body to tan */
body {
background-color: tan;
}
/* On
screens that are 992px or less, set the background color to blue */
@media
screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* On screens that are 600px or less,
set the
background color to olive */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
Hãy tự mình thử »Bạn có thắc mắc tại sao chúng tôi sử dụng chính xác 992px và 600px không? Chúng tôi gọi đó là "điểm dừng điển hình" cho thiết bị. Bạn có thể đọc thêm về các điểm dừng điển hình trong Hướng dẫn thiết kế web đáp ứng của chúng tôi.
Truy vấn phương tiện cho menu
Trong ví dụ này, chúng tôi sử dụng truy vấn phương tiện để tạo menu điều hướng phản hồi nhanh, có thiết kế khác nhau trên các kích thước màn hình khác nhau.
Màn hình lớn:
Màn hình nhỏ:
Ví dụ
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float:
left;
display: block;
color:
white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* On screens that are 600px wide or less, make the menu links stack on top
of each other instead of next to each other */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width:
100%;
}
} Hãy tự mình thử » Truy vấn phương tiện cho cột
Cách sử dụng phổ biến của truy vấn phương tiện là tạo bố cục linh hoạt. Trong ví dụ này, chúng tôi tạo bố cục khác nhau giữa bốn, hai cột và cột có chiều rộng tối đa, tùy thuộc vào các kích thước màn hình khác nhau:
Màn hình lớn:
Màn hình trung bình:
Màn hình nhỏ:
Ví dụ
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
}
/* On screens that are 992px
wide or less, go from
four columns to two columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are
600px wide or less, make
the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width:
100%;
}
}
Hãy tự mình thử »Mẹo: Một cách hiện đại hơn để tạo bố cục cột là sử dụng CSS Flexbox (xem ví dụ bên dưới). Tuy nhiên, nó không được hỗ trợ trong Internet Explorer 10 và các phiên bản cũ hơn. Nếu bạn yêu cầu hỗ trợ IE6-10, hãy sử dụng float (như được hiển thị ở trên).
Để tìm hiểu thêm về Mô-đun bố cục hộp linh hoạt, hãy đọc chương CSS Flexbox của chúng tôi .
Để tìm hiểu thêm về Thiết kế web đáp ứng, hãy đọc Hướng dẫn thiết kế web đáp ứng của chúng tôi .
Ví dụ
/* Container for flexboxes */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create four equal columns */
.column {
flex: 25%;
padding: 20px;
}
/* On screens that are 992px wide or less, go from
four columns to two columns */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* On screens that are 600px wide or less, make
the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
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
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 screen size is more than 600px wide, set the font-size of <div> to 80px */
@media screen and (min-width:
600px) {
div.example {
font-size: 80px;
}
}
/* If screen size is 600px wide, or less,
set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Hãy tự mình thử »Thư viện hình ảnh linh hoạt
Trong ví dụ này, chúng tôi sử dụng truy vấn phương tiện cùng với flexbox để tạo thư viện hình ảnh phản hồi:
Ví dụ
Hãy tự mình thử »Trang web linh hoạt
Trong ví dụ này, chúng tôi sử dụng truy vấn phương tiện cùng với flexbox để tạo trang web phản hồi, chứa thanh điều hướng linh hoạt và nội dung linh hoạt.
Ví dụ
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ụ
Sử dụng màu 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ử »Chiều rộng tối thiểu đến chiều rộng tối đa
Bạn cũng có thể sử dụng các giá trị (max-width: .. ) and (min-width: .. ) để đặt chiều rộng tối thiểu và chiều rộng tối đa.
Ví dụ: khi chiều rộng của trình duyệt nằm trong khoảng từ 600 đến 900px, hãy thay đổi giao diện của phần tử <div>:
Ví dụ
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
Hãy tự mình thử »Sử dụng giá trị bổ sung: Trong ví dụ bên dưới, chúng tôi thêm một truy vấn phương tiện bổ sung vào truy vấn phương tiện hiện có bằng dấu phẩy:
Ví dụ
/* When the width is between 600px and 900px or above 1100px
- change the appearance of <div> */
@media screen and (max-width: 900px) and (min-width:
600px), (min-width:
1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
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 .
Mẹo: Để tìm hiểu thêm về thiết kế web đáp ứng (cách nhắm mục tiêu các thiết bị và màn hình khác nhau), sử dụng điểm dừng truy vấn phương tiện, hãy đọc Hướng dẫn thiết kế web đáp ứng của chúng tôi.
