Hôm nay đụng một yêu cầu là phải xử lý CSS cho đối tượng ở hai màn hình lật ngang và lật dọc. Lúc đầu mình định dùng thuộc tính @media với min-width, max-width. Tuy nhiên vì một số lý do nên không thể sử dụng vì nhiều thiết bị có các kích cỡ màn hình khác nhau nên nếu muốn viết tổng quát thì rất khó.
Và sau một hồi tìm kiếm thì phát hiện ra là CSS có hỗ trợ phân biệt cho màn hình thiết bị khi lật ngang hay lật dọc. Rất đơn giản.
1 2 3 4 5 6 | @media (orientation:portrait) { /*CSS CODE*/ } @media (orientation:landscape) { /*CSS CODE*/ } |
Với portrait là màn hình dọc và landscape là màn hình ngang.
Chúc các bạn thành công.
Huỳnh Mai Anh Kiệt
- Advertisement -
