CSS Truy vấn truyền thông - Ví dụ
- Trang trước CSS Truy vấn phương tiện
- Trang tiếp theo Giới thiệu về RWD
CSS Truy vấn truyền thông - Các ví dụ khác
Hãy cùng xem thêm một số ví dụ về việc sử dụng truy vấn truyền thông.
Truy vấn truyền thông là một kỹ thuật phổ biến để truyền bảng phong cách tùy chỉnh cho các thiết bị khác nhau.
Dưới đây là một ví dụ đơn giản để thay đổi màu nền của các thiết bị khác nhau:
Ví dụ
/* Đặt màu nền của body là nâu nhạt */
body {
background-color: tan;
}
/* Đặt màu nền là xanh dương trên màn hình nhỏ hơn hoặc bằng 992 pixel */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* Đặt màu nền là olive trên màn hình 600 pixel hoặc nhỏ hơn */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
Bạn có muốn biết tại sao chúng tôi lại sử dụng chính xác 992px và 600px? Chúng là những gì chúng tôi gọi là 'điểm ngắt tiêu biểu' (typical breakpoints) của thiết bị. Bạn có thể tìm thấy chúng trong Hướng dẫn thiết kế web tương ứng Học thêm về kiến thức về điểm ngắt tiêu biểu trong CSS.
Điều tra truyền thông cho menu
Trong ví dụ này, chúng tôi sử dụng điều tra truyền thông để tạo menu điều hướng tương ứng, menu này sẽ thay đổi 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ụ
/* Khu vực chứa navbar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Liên kết Navbar */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Trên màn hình với độ rộng 600 pixel hoặc nhỏ hơn, để các liên kết menu chồng lên nhau thay vì sắp xếp ngang */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
Điều tra truyền thông cho cột
Một cách sử dụng phổ biến của điều tra truyền thông là tạo layout đàn hồi. Trong ví dụ này, chúng tôi đã tạo một layout thay đổi giữa bốn cột, hai cột và cột toàn diện, tùy thuộc vào 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ụ
/* Tạo bốn cột浮动 cạnh nhau bằng nhau */
.column {
float: left;
width: 25%;
}
/* Trên màn hình 992px hoặc nhỏ hơn, từ bốn cột trở thành hai cột */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* Trên màn hình với độ rộng nhỏ hơn hoặc bằng 600 pixel, để các cột chồng lên nhau thay vì sắp xếp ngang */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Lưu ý:phương pháp tạo layout cột hiện đại hơn là sử dụng CSS Flexbox (xin xem ví dụ dưới đây). Tuy nhiên, Internet Explorer 10 và các phiên bản trước không hỗ trợ nó. Nếu cần hỗ trợ IE6-10, hãy sử dụng float (như đã thấy ở trên).
Nếu bạn muốn học thêm về mô-đun布局 Flexbox, hãy học Flexbox CSS chương này.
Nếu bạn muốn học thêm về thiết kế Web tương ứng, hãy học Hướng dẫn thiết kế web tương ứng.
Ví dụ
/* Khu vực chứa hộp弹性 */
.row {
display: flex;
flex-wrap: wrap;
}
/* Tạo bốn cột bằng nhau */
.column {
flex: 25%;
padding: 20px;
}
/* Trên màn hình 992px hoặc nhỏ hơn, từ bốn cột trở thành hai cột */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* Trên màn hình với độ rộng nhỏ hơn hoặc bằng 600 pixel, để các cột chồng lên nhau thay vì sắp xếp ngang */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
Ẩn yếu tố bằng điều tra truyền thông
Một cách sử dụng phổ biến khác của điều tra truyền thông là ẩn các yếu tố trên các kích thước màn hình khác nhau:
Tôi sẽ ẩn nó trên màn hình nhỏ.
Ví dụ
/* Nếu kích thước màn hình là 600 pixel hoặc nhỏ hơn, ẩn phần tử này */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
Thay đổi kích thước font bằng truy vấn truyền thông
Bạn có thể sử dụng truy vấn truyền thông để thay đổi kích thước font của các phần tử trên các kích thước màn hình khác nhau:
Kích thước font thay đổi
Ví dụ
/* Nếu kích thước màn hình lớn hơn 600 pixel, đặt kích thước font của <div> là 80 pixel */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
/* Nếu kích thước màn hình là 600px hoặc nhỏ hơn, đặt kích thước font của <div> là 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Thư viện hình ảnh弹性
Trong ví dụ này, chúng ta sẽ sử dụng truy vấn truyền thông cùng với flexbox để tạo thư viện hình ảnh tương ứng:
Ví dụ
Trang web弹性
Trong ví dụ này, chúng ta sẽ sử dụng truy vấn truyền thông cùng với flexbox để tạo trang web tương ứng, bao gồm thanh điều hướng弹性 và nội dung弹性.
Ví dụ
Hướng: Hình người / Khung cảnh
Truy vấn truyền thông còn có thể được sử dụng để thay đổi布局 của trang web dựa trên hướng của trình duyệt.
Bạn có thể thiết lập một nhóm thuộc tính CSS mà chỉ áp dụng khi độ rộng của cửa sổ trình duyệt lớn hơn chiều cao, được gọi là màn hình ngang:
Ví dụ
Nếu hướng ở chế độ ngang, hãy sử dụng màu nền nhạt蓝色:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
Từ độ rộng tối thiểu đến độ rộng tối đa
Bạn cũng có thể sử dụng thuộc tính max-width và min-width để thiết lập độ rộng tối thiểu và tối đa.
Ví dụ, khi độ rộng của trình duyệt nằm trong khoảng từ 600 đến 900 pixel, thay đổi外观 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;
}
}
Sử dụng giá trị phụ: Trong ví dụ dưới đây, chúng ta sử dụng dấu phẩy (giống phép toán OR) để thêm các truy vấn truyền thông phụ vào các truy vấn truyền thông đã có:
Ví dụ
/* Khi độ rộng là từ 600 pixel đến 900 pixel hoặc lớn hơn 1100 pixel - thay đổi外观 của <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;
}
}
Tài liệu tham khảo @media CSS
Xem chi tiết về tất cả các loại truyền thông và tính năng / biểu thức trong Điều khoản @media trong tài liệu tham khảo CSS.
Lưu ý:Để học thêm về thiết kế web tương ứng (cách làm việc với các thiết bị và màn hình khác nhau) và sử dụng điểm ngắt điều tra truyền thông, hãy đọc Hướng dẫn thiết kế web tương ứng.
- Trang trước CSS Truy vấn phương tiện
- Trang tiếp theo Giới thiệu về RWD
