Xác định chiều rộng/chiều cao css trong các đơn vị độc lập của thiết bị?

Question

Tôi có một div và tôi đang cố gắng tìm ra cách để làm cho nó chiếm cùng một lượng không gian màn hình bất kể mật độ hiển thị thiết bị.

Ví dụ: giả sử tôi có hai thiết bị rộng 5 inch. Màn hình đầu tiên có tỷ lệ thiết bị-pixel = 1 và thiết bị thứ hai có tỷ lệ thiết bị-pixel = 2.

Device 1: 5 inches wide, device-pixel-ratio=1 
Device 2: 5 inches wide, device-pixel-ratio=2 

Thiết bị thứ hai có gấp đôi pixel được đóng gói vào cùng một không gian.

div style của tôi:

.myDivStyle { 
    width: 100px; 
    height: 50px; 
} 

Nếu tôi hiểu đúng, Device 2 sẽ xuất hiện để làm cho div tại một nửa chiều rộng/chiều cao như trên Device 1.

Nếu đó là trường hợp, là có một cách để xác định chiều rộng/chiều cao của chúng tôi trong một đơn vị độc lập thiết bị? Hay chúng ta phải mở rộng tất cả các kiểu của chúng ta theo cách thủ công trên tải trang vv sau khi chúng ta kiểm tra thuộc tính tỷ số thiết bị-pixel?

Cảm ơn bạn

Answer 1

Điều này nghe có vẻ giống như bạn cần làm việc với phần trăm thay vì pixel. Vì vậy, nó sẽ sử dụng một "tỷ lệ" số lượng màn hình của bạn

.myDivStyle { 
    width: 50%; 
    height: 25%; 
} 

Nó sẽ giải quyết vấn đề với số tiền của pixel. Điều này sẽ giải quyết vấn đề nếu bạn làm việc với màn hình của Iphone và Android, vì họ sử dụng hai độ phân giải hoàn toàn khác nhau. Ví dụ, tôi tin rằng Iphone sử dụng 320 bởi .. một cái gì đó, trong khi Samsung Galaxy của tôi sử dụng tôi nghĩ rằng 480 bởi một cái gì đó. (dunno các giá trị thực)

Answer 2

Xác định lại kích thước css của bạn bằng cách sử dụng đơn vị em sẽ là tốt.

Một số liên kết tốt trong tham chiếu này. Vui lòng kiểm tra những

1. w3.org
2. w3.org
3. css-tricks

Tất cả các liên kết trên đôn đốc rằng, em là phù hợp nhất trong những trường hợp khi bạn muốn tài liệu của bạn cư xử tốt trên nhiều loại thiết bị .

Answer 3

Hầu hết các thiết bị sẽ đến dưới 3 độ phân giải sau 1) HVGA-Một nửa số VGA (320 x 240) 2) WVGA- VGA rộng (800x 480) - gần 1,5 lần của HVGA 3) 2x HVGA - (640 X 960) - IPHONE 4 sử dụng độ phân giải này

Viết riêng biệt file css cho ba độ phân giải cao hơn bởi

@Media screen and (min-width: 320px) and (max-width: 480px){ 
/* css files here*/ 
} 

hoặc

@Media screen and (min-device-pixel-ratio: 2) 
{/* css files here*/ 

} 

Làm tương tự với các độ phân giải khác. Một lớp css được tạo ra ở độ phân giải 1 nên được sao chép dán trong cả ba độ phân giải để có được một cái nhìn hoàn hảo.Bằng cách này, bạn có thể giới thiệu một kiểu thiết bị hoàn hảo cụ thể