css mở rộng dựa trên kích thước màn hình dọc hoặc ngang?

Question

Tôi có hai div đang trôi nổi cạnh nhau. Những gì tôi muốn là để có nó có chiều rộng 100px khi bạn đang nhìn vào nó trong chế độ chân dung và cho phép nói 200 px trong cảnh quan. Điều này xảy ra trên thiết bị di động thực sự.

Vì vậy, div sẽ mở rộng khi ở chế độ ngang và thu nhỏ một chút theo chiều dọc.

Bất kỳ ý tưởng nào?

Answer 1

Vâng điều này là không thể với CSS2, nhưng nó sẽ có thể làm những gì bạn muốn với Javascript (đọc ra kích thước màn hình, vv).

Tôi không chắc bạn đang xem công nghệ nào, nhưng CSS3 cung cấp chính xác những gì bạn muốn với CSS3 Media Queries.

Với CSS3 bạn có công cụ thú vị như thế này (hoặc thậm chí bạn có thể chỉ định chiều rộng ví dụ 200px):

/* Portrait */ 
@media screen and (orientation:portrait) { 
    /* Portrait styles here */ 
} 
/* Landscape */ 
@media screen and (orientation:landscape) { 
    /* Landscape styles here */ 
} 

Check-out this example page cho lời giải thích nhiều hơn, hoặc this one.

CHỈNH SỬA Chỉ vì tôi đã tìm thấy trang này hôm nay: - viết rất tốt.

Answer 2

Bạn có thể thực hiện việc này bằng cách sử dụng tính năng phương tiện "định hướng" css. Bằng cách này, bạn có thể chỉ định kiểu tùy theo hướng màn hình, không liên quan đến kích thước màn hình. Bạn có thể tìm thấy định nghĩa w3.org chính thức về tính năng phương tiện này here. Kết hợp với các thông số kỹ thuật trên developer.mozilla.org điều này sẽ giải thích cách hoạt động.

---

Trích từ w3.org về 'định hướng' phương tiện truyền thông tính năng:

Tính năng 'định hướng' phương tiện truyền thông là 'chân dung' khi giá trị của các 'chiều cao' phương tiện truyền thông tính năng là lớn hơn hoặc bằng với giá trị của 'chiều rộng' tính năng đa phương tiện. Nếu không, ‘định hướng’ là ‘cảnh quan’.

Một lưu ý/quote từ developer.mozilla.org về "định hướng" tính năng:

Lưu ý: Giá trị này (tức là chân dung hoặc phong cảnh) không không tương ứng với thực tế hướng thiết bị. Mở bàn phím ảo trên hầu hết các thiết bị theo hướng dọc sẽ làm cho chế độ xem trở nên rộng hơn chiều cao, do đó gây ra trình duyệt để sử dụng kiểu ngang thay vì dọc.

---

Vì vậy, để nhắc lại, nó không phải là thực sự là định hướng màn hình kích hoạt chân dung hoặc phong cảnh truy vấn phương tiện truyền thông. Tuy nhiên nó là tỷ lệ giữa chiều cao và chiều rộng của màn hình!Bởi vì điều này cũng có ý nghĩa khi sử dụng "tính năng định hướng" với các thiết bị không di động/xúc giác do đó tôi đã thêm một bản trình diễn nhỏ để hiển thị hành vi của các truy vấn phương tiện này.

JSFIDDLE DEMO(thử thay đổi kích thước cổng xem)

Dưới đây là các truy vấn phương tiện truyền thông đại diện ảnh hưởng đến hướng ngang và dọc.

@media screen and (orientation:portrait) { 
    /* Portrait styles */ 
    /*set width to 100px */ 

} 
@media screen and (orientation:landscape) { 
    /* Landscape styles */ 
    /* set width to 200px*/ 

}