Các đơn vị Viewport, giữ tỷ lệ co?

Question

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.

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.

Answer 1

Tôi đã thực hiện nó hoạt động trong IE10:

#elem { 
    width: 100vw; 
    height: calc((9/16)*100vw); 
} 

@media (min-aspect-ratio:16/9) { 
    #elem { 
     height: 100vh; 
     width: calc((16/9)*100vh); 
    } 
} 

Live Demo:http://jsfiddle.net/C2ZGR/show/ (mở trong IE10 (phiên bản xem trước có sẵn cho Windows 7), sau đó cửa sổ thay đổi kích thước, vì vậy mà một trong hai chiều rộng , hoặc chiều cao rất nhỏ)

Tôi đã sử dụng phần tử có tỷ lệ khung hình 16: 9, nhưng mã có thể hoạt động với bất kỳ tỷ lệ khung hình nào - chỉ cần thay thế 16/9 và 9/16 với tỷ lệ cỡ ảnh bạn muốn.

Btw, IE10 là trình duyệt duy nhất mà bản demo này sẽ hoạt động. Firefox/Opera không triển khai các đơn vị viewport, và các trình duyệt WebKit hiện đang có một lỗi mà các đơn vị viewport không thể được sử dụng bên trong calc().