Vì vậy, tôi vừa phát hiện ra các đơn vị xem, và tôi thực sự muốn sử dụng chúng.Các đơn vị Viewport, giữ tỷ lệ co?
Thách thức đầu tiên: Phần tử của tôi có "kích thước cơ bản" là 760x670 pixel. Tôi muốn sử dụng đơn vị khung nhìn để mở rộng quy mô để độ cao là 100vh
hoặc chiều rộng là 100vw
, tùy theo mức nào nhỏ hơn.
Không may, mặc dù tôi có thể sử dụng 100vmin
để nhận được nhỏ hơn của hai, tôi chỉ có thể áp dụng nó cho chiều rộng hoặc chiều cao, không phải cả hai.
Hiện nay tôi đang sử dụng:
#root {
width: 760px;
height: 670px;
width: 100vw;
height: calc(670vw/760);
}
này quy mô chiều rộng để phù hợp với màn hình, dẫn đến di chuyển dọc. Đây không phải là quá xấu, nhưng tôi thích nó nếu tôi thực sự có thể có nó phù hợp với khung nhìn.
Tôi đang thử nghiệm trong Chrome. Có vẻ như các đơn vị 'vw' không thể được sử dụng bên trong' calc'. Tôi đã thử các công cụ như 'height: -webkit-calc (100vw/3)'. Chỉ có các trình duyệt khác hỗ trợ cả các đơn vị 'calc' và viewport là IE10 và Safari 6, cả hai đều không thể được cài đặt trên nền tảng của tôi (Windows 7). –
Btw, điều này có thể thực hiện được với truy vấn phương tiện, vì bạn có thể mã chi nhánh dựa trên tỷ lệ khung hình, ví dụ: '@media all và (min-aspect-ratio: 760/670) {...}'. –
Đó là lỗi [Lỗi WebKit] (https://bugs.webkit.org/show_bug.cgi?id=94158). Vì vậy, hãy quên Chrome/Safari. Firefox/Opera thậm chí không triển khai các đơn vị xem. Dường như IE10 là trình duyệt duy nhất hiểu mã của bạn. ':)' –