orientation
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Tính năng media orientation trong CSS có thể được dùng để kiểm tra hướng của viewport (hoặc hộp trang, đối với phương tiện phân trang).
Note: Tính năng này không tương ứng với hướng thiết bị. Mở bàn phím mềm trên nhiều thiết bị ở hướng dọc (portrait) sẽ khiến viewport trở nên rộng hơn chiều cao, do đó khiến trình duyệt sử dụng kiểu landscape thay vì portrait.
Cú pháp
Tính năng orientation được xác định bởi một trong các giá trị từ khóa dưới đây.
Giá trị từ khóa
Ví dụ
Hướng dọc (Portrait)
Trong ví dụ này, chúng ta có ba hộp trong HTML và sử dụng tính năng media orientation để chuyển đổi giữa bố cục hàng (landscape) và bố cục cột (portrait).
Kết quả ví dụ được nhúng trong một <iframe> có chiều cao lớn hơn chiều rộng, vì vậy các hộp sẽ có bố cục cột.
HTML
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
CSS
body {
display: flex;
}
div {
background: yellow;
width: 200px;
height: 200px;
margin: 0.5rem;
padding: 0.5rem;
}
@media (orientation: landscape) {
body {
flex-direction: row;
}
}
@media (orientation: portrait) {
body {
flex-direction: column;
}
}
Kết quả
Hướng ngang (Landscape)
Ví dụ này có cùng mã với ví dụ trước: nó có ba hộp trong HTML và sử dụng tính năng media orientation để chuyển đổi giữa bố cục hàng (landscape) và bố cục cột (portrait).
Tuy nhiên, trong ví dụ này, kết quả được nhúng trong một <iframe> có chiều cao nhỏ hơn chiều rộng, vì vậy các hộp sẽ có bố cục hàng.
HTML
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
CSS
body {
display: flex;
}
div {
background: yellow;
width: 200px;
height: 200px;
margin: 0.5rem;
padding: 0.5rem;
}
@media (orientation: landscape) {
body {
flex-direction: row;
}
}
@media (orientation: portrait) {
body {
flex-direction: column;
}
}
Đặc tả kỹ thuật
| Specification |
|---|
| Media Queries Level 4 # orientation |