सबसे अच्छा अभ्यास फ़ॉन्ट आकार मोबाइल

Question

के लिए मैं इतने पर इस सवाल को देखा है:

What are the most common font-sizes for H1-H6 tags इस के साथ एच टैग के लिए फ़ॉन्ट आकार की सिफारिश की जा रही:

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

इन के लिए एक 'सबसे अच्छा अभ्यास' है मोबाइल फोन के लिए? आईफोन स्क्रीन आकार है?

Answer 1

आपके प्रश्न में फ़ॉन्ट आकार एक उदाहरण है कि प्रत्येक हेडर को एक दूसरे के मुकाबले क्या होना चाहिए, इसके बजाय उन्हें आकार (पिक्सल में) के आकार के बजाय होना चाहिए।

तो आपके प्रश्न के जवाब में "क्या मोबाइल फोन के लिए इनके लिए 'सबसे अच्छा अभ्यास है? - आईफोन स्क्रीन आकार कहें?", हाँ शायद वहां है - लेकिन आपको लगता है कि कोई क्या कहता है "सर्वोत्तम अभ्यास "आपके लेआउट के लिए काम नहीं करता है।

हालांकि, आपको सही ट्रैक पर लाने में सहायता के लिए, this article about building responsive layouts डिवाइस स्क्रीन आकार के संबंध में बेस font-size में पिक्सेल में गणना करने का एक अच्छा उदाहरण प्रदान करता है। उस लेख से सुझाव स्क्रीन संकल्प के लिए

सुझाव फ़ॉन्ट आकार इस प्रकार हैं:

@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

पूरी बात यह है कि आकार बेस के सापेक्ष है। तो मैं कहूंगा कि आप बेस को बदलकर फ़ॉन्ट आकार रख सकते हैं।

उदाहरण: यदि आप आधार 16px है, और पी .75em (जो 12px है) तो आपको आधार को लगभग 20px तक उठाना होगा। इस मामले में पी लगभग 15 पीएक्स के बराबर होगा जो न्यूनतम रूप से मोबाइल फोन के लिए आवश्यक है।

Answer 3

स्वीकार किए जाते हैं जवाब देने के लिए मेरी टिप्पणी के आधार पर, वहाँ एक बहुत संभावित नुकसान है कि आप font- की घोषणा के द्वारा सामना कर सकते हैं कर रहे हैं 12px से छोटे आकार। शैलियों कि इतने की तरह कम से कम 12px की गणना की font-आकार के लिए नेतृत्व, और घोषणा की द्वारा:

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

आपको लगता है कि स्वचालित रूप से renders किसी भी फ़ॉन्ट आकार 12px तहत अभिकलन एक चीनी भाषा पैक के साथ Chrome जैसे ब्राउज़र में समस्याएं आती हैं होगा, 12px के रूप में। तो, निम्नलिखित सत्य है:

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

मैं यह भी तर्क दूंगा कि अभिगम्य कारणों के लिए, आपको आमतौर पर 12px के तहत आकारों का उपयोग नहीं करना चाहिए। आप कैप्शन और इसी तरह के मामले में एक केस बनाने में सक्षम हो सकते हैं, लेकिन फिर से - कुछ ब्राउज़र सेटअप के तहत आश्चर्यचकित होने के लिए तैयार हो जाते हैं, और जब वह आपकी सामग्री को पढ़ने की कोशिश कर रही है तो अपनी दादी स्क्वांट बनाने के लिए तैयार हो जाती है।

मैं बजाय, कुछ इस तरह के लिए चुनते हैं:

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; 
    } 
} 

आप पाएंगे कि tonsofsites भी p तत्वों के लिए, पहुंच उपयोग नहीं बल्कि बड़े फ़ॉन्ट आकार पर ध्यान केंद्रित करना होगा।

एक साइड नोट के रूप में, margin-bottomfont-size के बराबर सेटिंग आमतौर पर आकर्षक हो जाता है, यानी।:

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

शुभकामनाएँ।