tốt nhất cỡ chữ thực hành cho điện thoại di động

Question

Tôi đã thấy câu hỏi này trên SO:

What are the most common font-sizes for H1-H6 tags với điều này được đề nghị kích thước phông chữ fo thẻ H:

h1 { font-size: 2em; } 
h2 { font-size: 1.5em; } 
h3 { font-size: 1.17em; } 
h5 { font-size: .83em; } 
h6 { font-size: .75em; } 

Có một 'thực hành tốt nhất' cho các cho điện thoại di động? -say kích thước màn hình iphone?

Answer 1

Kích thước phông chữ trong câu hỏi của bạn là ví dụ về tỷ lệ mỗi tiêu đề phải so với nhau, thay vì kích thước của chúng phải là (theo pixel).

Vì vậy, để trả lời câu hỏi của bạn "Có một 'thực hành tốt nhất' cho chúng cho điện thoại di động không? - nói kích thước màn hình iphone?", có thể có - nhưng bạn có thể tìm thấy những gì ai đó nói là "thực hành tốt nhất "không hoạt động cho bố cục của bạn.

Tuy nhiên, để giúp bạn đi đúng hướng, this article about building responsive layouts cung cấp ví dụ tốt về cách tính cơ số font-size bằng pixel liên quan đến kích thước màn hình thiết bị.

Các gợi ý font-kích thước cho độ phân giải màn hình gợi ý từ bài viết mà như sau:

@media (min-width: 858px) { 
    html { 
     font-size: 12px; 
    } 
} 

@media (min-width: 780px) { 
    html { 
     font-size: 11px; 
    } 
} 

@media (min-width: 702px) { 
    html { 
     font-size: 10px; 
    } 
} 

@media (min-width: 724px) { 
    html { 
     font-size: 9px; 
    } 
} 

@media (max-width: 623px) { 
    html { 
     font-size: 8px; 
    } 
} 

Answer 2

Toàn bộ điều với em là, rằng kích thước là tương đối so với cơ sở. Vì vậy, tôi sẽ nói rằng bạn có thể giữ kích thước phông chữ bằng cách thay đổi cơ sở.

Ví dụ: Nếu cơ sở của bạn là 16px và p là 0,75em (là 12px), bạn sẽ phải tăng cơ sở lên khoảng 20px. Trong trường hợp này p sau đó sẽ bằng khoảng 15px đó là tối thiểu cá nhân tôi yêu cầu cho điện thoại di động.

Answer 3

Dựa trên nhận xét của tôi để câu trả lời được chấp nhận, có rất nhiều cạm bẫy tiềm năng mà bạn có thể gặp phải bằng cách tuyên bố in- kích thước nhỏ hơn 12px. Bằng cách tuyên bố phong cách dẫn đến tính font-kích thước nhỏ hơn 12px, như vậy:

html { 
    font-size: 8px; 
} 
p { 
    font-size: 1.4rem; 
} 
// Computed p size: 11px. 

Bạn sẽ chạy vào các vấn đề với các trình duyệt, như Chrome với một gói ngôn ngữ Trung Quốc có thể tự động làm cho bất kỳ kích thước phông chữ tính dưới 12px là 12px. Vì vậy, sau đây là đúng:

h6 { 
    font-size: 12px; 
} 
p { 
    font-size: 8px; 
} 
// Both render at 12px in Chrome with a Chinese language pack. 
// How unpleasant of a surprise. 

Tôi cũng cho rằng vì lý do trợ năng, bạn thường không nên sử dụng kích thước dưới 12px. Bạn có thể tạo ra một trường hợp cho chú thích và tương tự, nhưng một lần nữa - chuẩn bị ngạc nhiên dưới một số thiết lập trình duyệt, và chuẩn bị để làm cho bà ngoại nheo mắt khi cô ấy đang cố đọc nội dung của bạn.

tôi sẽ thay vào đó, lựa chọn một cái gì đó như thế này:

h1 { 
    font-size: 2.5rem; 
} 

h2 { 
    font-size: 2.25rem; 
} 

h3 { 
    font-size: 2rem; 
} 

h4 { 
    font-size: 1.75rem; 
} 

h5 { 
    font-size: 1.5rem; 
} 

h6 { 
    font-size: 1.25rem; 
} 

p { 
    font-size: 1rem; 
} 

@media (max-width: 480px) { 
    html { 
     font-size: 12px; 
    } 
} 

@media (min-width: 480px) { 
    html { 
     font-size: 13px; 
    } 
} 

@media (min-width: 768px) { 
    html { 
     font-size: 14px; 
    } 
} 

@media (min-width: 992px) { 
    html { 
     font-size: 15px; 
    } 
} 

@media (min-width: 1200px) { 
    html { 
     font-size: 16px; 
    } 
} 

Bạn sẽ thấy rằng tonsofsites mà phải tập trung vào việc sử dụng khả năng tiếp cận các kích cỡ phông chữ khá lớn, ngay cả đối với p yếu tố.

Lưu ý phụ, thiết lập margin-bottom bằng font-size thường cũng có xu hướng hấp dẫn, tức là:

h1 { 
    font-size: 2.5rem; 
    margin-bottom: 2.5rem; 
} 

Chúc may mắn.