font-size và pixel tỷ lệ thiết bị

Hãy nói rằng tôi có kích thước phông chữ mặc định thiết lập để 16px (điều này nên không cần thiết vì nó mặc định trong hầu hết các trình duyệt):font-size và pixel tỷ lệ thiết bị

Để ngắn gọn, trang web của tôi có chứa một số hộp với kích thước 10em x 10em.

 
body, html 
{ 
    font-size: 16px; 
} 
.box { 
    border: 1px green solid; 
    background-color:green; 
    width:10em; 
    height:10em; 
}

Trang web của tôi đã được đáp ứng với các truy vấn min-width phương tiện truyền thông cho breakpoint cụ thể nhắm mục tiêu vào các giá trị em (36, 62 và 85em).

Điều duy nhất trang web của tôi làm là thay đổi chiều rộng và màu sắc của hộp.

 
@media (min-width:36em) { 
    .box { 
    width: 36em; 
    border:1px red solid; 
    background-color:red; 
    } 
} 
@media (min-width:62em) { 
    .box { 
     width: 62em; 
     border:1px blue solid; 
     background-color:blue; 
    } 
} 
@media (min-width:85em) { 
    .box { 
     width: 85em; 
     border:1px orange solid; 
     background-color:orange; 
    } 
}

Bây giờ chúng ta hãy nói rằng tôi có một số thiết bị có độ phân giải 1440x900 nơi trình duyệt quyết định mật độ pixel của thiết bị là 2dppx theo mặc định. Kết quả là, mọi thứ trông lớn hơn nhiều so với nó. Và tôi không thích nó.

Nhưng giải pháp phải dễ dàng, phải không? Chỉ cần thêm một truy vấn phương tiện lúc bắt đầu cho mật độ pixel 2dppx và vì nó gấp đôi pixel, tôi chỉ giảm kích thước phông chữ xuống một nửa ... điều đó sẽ hoạt động, đúng không?

Và kể từ khi tôi sử dụng "em" trên tất cả mọi thứ thì bằng cách thay đổi cỡ chữ một nửa, tôi tự động giảm kích thước của tất cả mọi thứ "em" -sized một nửa ... phải không?

 
@media (min-resolution: 2dppx) { 
    body, html { 
     font-size: 50%; 
    } 
}

relevant jsFiddle

Vâng tôi thấy nó không hoạt động như tôi nghĩ rằng nó sẽ ... Tôi cố gắng để google câu trả lời nhưng không tìm thấy bất cứ điều gì có liên quan, tôi nghi ngờ tôi hiểu sai như thế nào font-kích thước, ems và mật độ pixel hoạt động ...

Giảm kích thước phông chữ xuống 50% làm giảm kích thước phông chữ nhiều hơn một nửa. Kích thước ban đầu là 16px nhưng kích thước phông chữ: 50%; kết quả trong một phông chữ nhỏ hơn nhiều so với kích thước phông chữ: 8px ... Đã thử nghiệm trong Firefox và Chrome. Có ai biết tại sao không?
Khi tôi đặt kích thước phông chữ: 8px; trong truy vấn phương tiện cho 2dppx thì truy vấn phương tiện cho chiều rộng tối thiểu: 36em, 62em và 85em không kích hoạt như tôi mong đợi, ít nhất là khi tôi thay đổi layout.css.devPixelsPerPx trong Firefox. Chiều rộng tối thiểu trong truy vấn phương tiện hoạt động như kích thước phông chữ vẫn ở mức 16px khi nó được thay đổi bằng truy vấn phương tiện dppx. Đã thử nghiệm trong Firefox và Chrome. Có ai biết tại sao không?

CẬP NHẬT

Hình như truy vấn phương tiện truyền thông được nạp trong bối cảnh 1dppx, nó không quan trọng nếu bạn sử dụng "em", có vẻ như họ đang lưu trữ trên tải và các giá trị như min-width được cố định với giá trị đầu tiên và cho dù bạn thay đổi kích thước phông chữ cơ sở trong truy vấn phương tiện khác nhau, các truy vấn khác không làm mới.

Giải pháp duy nhất tôi có thể nghĩ ngay bây giờ là nhân tất cả các truy vấn phương tiện. Một truy vấn phương tiện cho giá trị px trong bối cảnh 1 dppx và một truy vấn phương tiện khác cho giá trị px trong ngữ cảnh 2 dppx (50% giá trị đầu tiên).

Nguồn

2017-08-25 Mirek

Tại sao bạn nghĩ rằng 'font-size: 50% 'là một nửa' font-size: 16px'? Đó là một nửa của bất kỳ kích thước phông chữ _ là gì. –

Dù sao, việc giảm kích thước phông chữ ở dppx cao hơn không phải là một ý tưởng hay. Những màn hình này có dppx cao hơn vì các chấm phần cứng nhỏ hơn. Và nếu bạn đặt kích thước phông chữ của bạn thành 16 dấu chấm phần cứng trên màn hình 2dppx, nếu có kích thước bằng 8 pixel trên màn hình chuẩn (96dpi), điều này thực sự rất nhỏ. (Đó là với chúng tôi guys cũ anyway.) –

Cha mẹ được rõ ràng thiết lập để 16px (cơ thể, html) vì vậy 50% nên bằng 8px. Và tôi có ý định giảm kích thước chỉ cho một độ phân giải cụ thể để nhắm mục tiêu các thiết bị sử dụng mật độ điểm ảnh cao hơn mà không có lý do và trang kết quả lớn hơn. Tôi không biết bất kỳ cách nào khác làm thế nào để giải quyết vấn đề này khác hơn là nhắm mục tiêu mật độ cụ thể với độ phân giải specifi. – Mirek

Nhờ ông Lister trong ý kiến, tôi phát hiện ra rằng đây:

 
@media (min-resolution: 2dppx) { 
    body, html { 
     font-size: 50%; 
    } 
}

... không phải là những gì tôi có ý định làm.Quy tắc 50% hoạt động cho các thẻ <html> VÀ đối với thẻ <body>. Kích thước phông chữ kết quả không phải là 8px trong cơ thể, nhưng 4px, bởi vì 50% trong html là 8px và 50% khác trong kết quả thẻ lồng nhau trong 4px.

Những gì tôi dự định để làm được điều này:

 
@media (min-resolution: 2dppx) { 
    html { 
     font-size: 50%; 
    } 
}

vấn đề font-size được giải quyết.

Đối với truy vấn phương tiện: Tôi phát hiện ra rằng kích thước trong truy vấn @media bỏ qua mật độ pixel nhưng kích thước trong nội dung quy tắc CSS thì không. Vì tôi sử dụng kích thước "em" và SASS, tôi chỉ có thể thay thế tất cả các truy vấn @media bằng mixin này (ví dụ: 2dppx):

 
@mixin media-min-width($min-width) { 
    @media(min-width:$min-width), (min-width: $min-width/2) and (min-resolution: 2dppx) { 
     @content; 
    } 
}

Nguồn

2017-08-29 09:43:44 Mirek

font-size và pixel tỷ lệ thiết bị

Trả lời

Các vấn đề liên quan