सीएसएस में उत्तरदायी फ़ॉन्ट आकार

342

मैंने Zurb Foundation 3 ग्रिड का उपयोग करके एक साइट बनाई है । प्रत्येक पृष्ठ में एक बड़ा है h1:

body {
  font-size: 100%
}

/* Headers */

h1 {
  font-size: 6.2em;
  font-weight: 500;
}
<div class="row">
  <div class="twelve columns text-center">
    <h1> LARGE HEADER TAGLINE </h1>
  </div>
  <!-- End Tagline -->
</div>
<!-- End Row -->
स्निपेट का विस्तार करें

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

मैंने देखा है कि Zurb Foundation 3 टाइपोग्राफी उदाहरण पृष्ठ पर , हेडर ब्राउज़र के अनुकूल होता है क्योंकि यह संकुचित और विस्तारित होता है।

क्या मुझे वाकई कुछ याद आ रहा है? मुझे यह कैसे हासिल होगा?

css  responsive-design  font-size  zurb-foundation  em 
— user2213682
स्रोत
1
यहां देखें: उत्तरदायी फ़ॉन्ट-आकार केवल css के साथ https://github.com/pavelkukov/Font-Size-Responsive-CSS डेमो: http://fiddle.jshell.net/dgJaK/1/wow/
— pavel
2
पहला लिंक पुराना मुझे लगता है
OMG, इतने सारे जटिल जवाब। बस सीएसएस रेम का उपयोग करें ।
— टूलमेकर
सीएसएस रेम व्यूपोर्ट विंडो के आधार पर गतिशील रूप से आकार परिवर्तन नहीं करता है। यदि आपको ऐसा करने की आवश्यकता है, तो आपको या तो जावास्क्रिप्ट की आवश्यकता होगी या नीचे के शुद्ध CSS3 उत्तरों में से एक की आवश्यकता होगी। यह वास्तव में केवल कुछ है जो आपको बड़े शीर्षक पाठ पर चाहिए।
— इवान डोनोवन
@ToolmakerSteve यह कहना बहुत भोली बात है, विशेष रूप से सभी उपकरणों के लिए उत्तरदायी होने के मुद्दों के साथ। रेम वास्तव में एक बहुत अच्छा विकल्प नहीं है, आप सिर्फ जवाबों को नजरअंदाज करते हैं क्योंकि यह "जटिल" है?
— एमोब

जवाबों:

287

font-sizeइस तरह जवाब नहीं होगा जब ब्राउज़र विंडो का आकार। इसके बजाय वे ब्राउज़र ज़ूम / टाइप साइज़ सेटिंग्स का जवाब देते हैं, जैसे कि आप दबाते हैं Ctrlऔर +साथ ही ब्राउज़र में कीबोर्ड पर।

मीडिया के प्रश्नों

आपको कुछ निश्चित अंतराल पर फ़ॉन्ट-आकार को कम करने के लिए मीडिया प्रश्नों का उपयोग करते हुए देखना होगा, जहां यह आपके डिज़ाइन को तोड़ना और स्क्रॉलबार बनाना शुरू करता है।

उदाहरण के लिए, नीचे अपने सीएसएस के अंदर इसे जोड़ने का प्रयास करें, जहां भी आपका डिज़ाइन टूटना शुरू हो रहा है, उसके लिए 320 पिक्सेल चौड़ाई बदलना:

@media only screen and (max-width: 320px) {

   body { 
      font-size: 2em; 
   }

}

व्यूपोर्ट प्रतिशत लंबाई

तुम भी उपयोग कर सकते हैं व्यूपोर्ट प्रतिशत लंबाई जैसे vw, vh, vminऔर vmax। इस राज्यों के लिए आधिकारिक W3C दस्तावेज़:

व्यूपोर्ट-प्रतिशत लंबाई प्रारंभिक ब्लॉक वाले आकार के सापेक्ष है। जब प्रारंभिक युक्त ब्लॉक की ऊंचाई या चौड़ाई बदल जाती है, तो उन्हें तदनुसार स्केल किया जाता है।

फिर से, उसी W3C दस्तावेज़ से प्रत्येक व्यक्तिगत इकाई को नीचे के रूप में परिभाषित किया जा सकता है:

vw इकाई - प्रारंभिक युक्त ब्लॉक की चौड़ाई के 1% के बराबर।

vh इकाई - प्रारंभिक युक्त ब्लॉक की ऊंचाई के 1% के बराबर।

vmin इकाई - vw या vh के छोटे के बराबर।

vmax इकाई - vw या vh के बड़े के बराबर।

और उनका उपयोग ठीक उसी तरह किया जाता है जैसे किसी अन्य सीएसएस मूल्य में:

.text {
  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

संगतता अपेक्षाकृत अच्छी है क्योंकि यहां देखा जा सकता है । हालाँकि, Internet Explorer और Edge के कुछ संस्करण vmax का समर्थन नहीं करते हैं। इसके अलावा, iOS 6 और 7 में vh यूनिट के साथ एक समस्या है, जिसे iOS 8 में ठीक किया गया था।

— पीटर फेदरस्टोन
स्रोत
44
किस बारे में font-size: 1.5vw;?
— Dev_NIX
24
बेहतर अभी तक,font-size: calc(12px + 1vw)
— Cuzox
3
@Dev_NIX इसके बारे में क्या?
— क्रिस्टियान वेस्टरबेक
1
मुझे पसंद आया जो @Cuzox का प्रस्ताव है - वह वही है जिसकी मुझे तलाश थी
— Eleazar Resendez
@Cuzox आपको यह प्रस्तुत करना चाहिए कि एक उत्तर के रूप में, अन्य समाधान परीक्षण के तरीके को छोटे से लाते हैं ताकि वे उपयोगी किसी भी चीज़ के लिए उन तरीकों का उपयोग कर सकें। जब आप एक स्थिर ऊंचाई गठबंधन यह है कि बनाता है जैसे कि यह उपयोगी
— रिक्स
617

आप ems, px, या pts के बजाय व्यूपोर्ट मान का उपयोग कर सकते हैं:

व्यूपोर्ट चौड़ाई का 1vw = 1%

व्यूपोर्ट ऊँचाई का 1vh = 1%

1vmin = 1vw या 1vh, जो भी छोटा हो

1vmax = 1vw या 1vh, जो भी बड़ा हो

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

सीएसएस-ट्रिक्स से: व्यूपोर्ट साइज़्ड टाइपोग्राफी

— ठोस साँप
स्रोत
2
मैं वर्तमान में केवल वेबकिट पर कोडिंग कर रहा हूं - मैं इस माप के साथ प्यार में हूं, धन्यवाद
— iamwhitebox
21
— सम्मिलन नाम
19
महान, मैं पाठ को स्केल करने के लिए vw का उपयोग कर सकता हूं ताकि यह एक डेस्कटॉप पर पुनीत न दिखे! बिल्कुल सही ... ओह। हुह, अब एक फोन पर देखे जाने पर पाठ पढ़ने के लिए बहुत छोटा है। ठीक है, अच्छी तरह से मैं "अधिकतम (x, y)" का उपयोग कर सकता हूं यह सुनिश्चित करने के लिए कि यह न्यूनतम आकार से परे सिकुड़ नहीं जाता है। बिल्कुल सही ... ओह। हम्म। ऐसा लगता है कि "अधिकतम" क्रोम द्वारा ठीक से समर्थित नहीं है। ठीक है, अच्छी तरह से लगता है कि मैं फिर से "px" का उपयोग करूंगा।
— original_username
10
यह मेरे लिए व्यावहारिक नहीं लगता है क्योंकि आकार मोबाइलों में बहुत छोटा हो जाता है और उच्च रिज़ॉल्यूशन डेस्कटॉप में बहुत बड़ा होता है।
— Mr_Green
7
@Mr_Green: इसीलिए आप मीडिया के प्रश्नों का उपयोग करते हैं। छोटे व्यूपोर्ट पर, बड़े व्यूपोर्ट पर फॉन्ट को बड़ा करें, इसे छोटा करें।
— एलिस्टेयर
45

मैं इस मुद्दे को दूर करने के तरीकों के साथ चारों ओर खेल रहा हूं, और मुझे विश्वास है कि मुझे एक समाधान मिल गया है:

यदि आप इंटरनेट एक्सप्लोरर 9 (और बाद में) और अन्य सभी आधुनिक ब्राउज़रों के लिए अपना आवेदन लिख सकते हैं जो सीएसएस कैल्क (), रेम इकाइयों और विमिन इकाइयों का समर्थन करते हैं। आप मीडिया के प्रश्नों के बिना स्केलेबल पाठ को प्राप्त करने के लिए इसका उपयोग कर सकते हैं:

body {
  font-size: calc(0.75em + 1vmin);
}

यहां यह कार्रवाई में है: http://codepen.io/csuwldcat/pen/qOqVNO

— csuwldcat
स्रोत
2
मुझे ध्यान देना चाहिए कि यहाँ अंतर यह है कि दो इकाइयों को मिलाने के लिए कैल्क का उपयोग करना vw पाठ पैमाने पर विचरण को चरम सीमा पर म्यूट करने में मदद करने का एक आसान तरीका है।
— csuwldcat
व्यूपोर्ट इकाइयाँ किसी भी परियोजना के लिए बहुत अच्छी हैं जिन्हें पुराने ब्राउज़रों के साथ संगतता की आवश्यकता नहीं है। यह कैल्क ट्रिक वही करता है जो आप कहते हैं, पाठ को सुचारू रूप से स्केल करना (मीडिया प्रश्नों द्वारा निर्धारित सख्त सीमाओं के विपरीत) लेकिन स्क्रीन आकार में परिवर्तन की तुलना में कम (या अधिक) अनुपात पर
— वार्ड डीएस
इसका उपयोग कैसे किया जाना चाहिए? मेरा मतलब है, अगर मुझे अपने फ़ॉन्ट का आकार बदलना है, तो क्या मुझे केवल एम यूनिट, केवल विमिन यूनिट या दोनों को बदलना चाहिए?
— स्नोबो डॉग
मैं यहां इस अत्यंत सरल समाधान को लिखने के लिए आया था, लेकिन फिर आपका उत्तर देखा और +1 दिया। हम इस समाधान को हर तत्व पर लागू कर सकते हैं। उदाहरण के लिए छवि की चौड़ाई: कैल्क (50 पीएक्स + 10 वीडब्ल्यू)
— y.selimdogan
35

mediaसंवेदनशील स्टाइलिंग के लिए CSS विनिर्देशक (जो वे [zurb] उपयोग करते हैं) का उपयोग करें:

@media only screen and (max-width: 767px) {

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}
— अल्बर्ट जिंग
स्रोत
29

यदि आपको jQuery समाधान का उपयोग करने में कोई आपत्ति नहीं है तो आप TextFill प्लगइन की कोशिश कर सकते हैं

jQuery TextFill एक कंटेनर में फिट होने के लिए पाठ का आकार बदलता है और फ़ॉन्ट आकार को यथासंभव बड़ा बनाता है।

https://github.com/jquery-textfill/jquery-textfill

— जावी स्टोलज़
स्रोत
15

इसे प्राप्त करने के कई तरीके हैं।

मीडिया क्वेरी का उपयोग करें , लेकिन इसके लिए कई विराम बिंदुओं के लिए फ़ॉन्ट आकार की आवश्यकता होती है:

body
{
    font-size: 22px;
}

h1
{
    font-size: 44px;
}

@media (min-width: 768)
{
    body
    {
        font-size: 17px;
    }
    h1
    {
        font-size: 24px;
    }
}

% या em में आयामों का उपयोग करें । बस आधार फ़ॉन्ट आकार बदलें, और सब कुछ बदल जाएगा। पिछले एक के विपरीत, आप बस हर बार बॉडी फॉन्ट को बदल सकते हैं और h1 को नहीं बदल सकते हैं या बेस फॉन्ट का आकार डिवाइस और बाकी सभी में डिफ़ॉल्ट होना चाहिए em:

  1. "एम्स" (ईएम) : "एम" एक स्केलेबल इकाई है। उदाहरण के लिए, एक em वर्तमान फ़ॉन्ट-आकार के बराबर है, यदि दस्तावेज़ का फ़ॉन्ट-आकार 12 pt है, तो 1 em 12 pt के बराबर है। एम्स प्रकृति में स्केलेबल हैं, इसलिए 2 एमएम 24 पीटी के बराबर होंगे। 5 एमएम 6 पीटी, आदि के बराबर होंगे।
  2. प्रतिशत (%) : प्रतिशत इकाई "ईएम" इकाई की तरह है, कुछ मूलभूत अंतरों के लिए बचाते हैं। सबसे पहले और सबसे महत्वपूर्ण, वर्तमान फ़ॉन्ट-आकार 100% (यानी 12 pt = 100%) के बराबर है। प्रतिशत इकाई का उपयोग करते समय, आपका पाठ मोबाइल उपकरणों और पहुंच के लिए पूरी तरह से स्केलेबल रहता है।

देखिए kyleslifeffer.com /…।

CSS 3 नए आयामों का समर्थन करता है जो व्यू पोर्ट के सापेक्ष हैं। लेकिन यह एंड्रॉइड पर काम नहीं करता है:

  1. व्यूपोर्ट की चौड़ाई का 3.2vw = 3.2%
  2. 3.2vh = व्यूपोर्ट की ऊंचाई का 3.2%
  3. 3.2vmin = 3.2vw या 3.2vh का छोटा

  4. 3.2vmax = 3.2vw या 3.2vh का बड़ा हिस्सा

    body
{
    font-size: 3.2vw;
}

सीएसएस-ट्रिक्स देखें ... और क्या मैं उपयोग कर सकता हूं ...

— aWebDeveloper
स्रोत
13

रेमेस यूनिट्स का उपयोग करते हुए उत्तरदायी फ़ॉन्ट आकारों में एक और दृष्टिकोण है।

html {
    /* Base font size */
    font-size: 16px;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
}

बाद में मीडिया के प्रश्नों में, आप आधार फ़ॉन्ट आकार बदलकर सभी फ़ॉन्ट आकार समायोजित कर सकते हैं:

@media screen and (max-width: 767px) {
    html {
      /* Reducing base font size will reduce all rem sizes */
      font-size: 13px;
    }

    /* You can reduce font sizes manually as well */
    h1 {
        font-size: 1.2rem;
    }
    h2 {
        font-size: 1.0rem;
    }
}

Internet Explorer 7 और Internet Explorer 8 में यह काम करने के लिए आपको px इकाइयों के साथ एक फालबैक जोड़ना होगा:

h1 {
    font-size: 18px;
    font-size: 1.125rem;
}

यदि आप कम के साथ विकसित कर रहे हैं , तो आप एक मिश्रण बना सकते हैं जो आपके लिए गणित करेगा।

रेम इकाइयों का समर्थन - http://caniuse.com/#feat=rem

— यूरी पी।
स्रोत
11

"Vw" समाधान में बहुत छोटी स्क्रीन पर जाने पर समस्या होती है। आप आधार का आकार निर्धारित कर सकते हैं और वहाँ कैल्क () के साथ जा सकते हैं:

font-size: calc(16px + 0.4vw);
— टुतविदास बगदियस
स्रोत
मैंने font-size: calc(1.2rem + 1vw)हेडिंग के लिए इस्तेमाल किया । इस तरह मुझे गैर-पिक्सेल आधारित इकाई (हालांकि यह लागू नहीं हो सकता है) का उपयोग करने का फायदा हुआ। मेरे पास पुराने ब्राउज़रों के लिए सादे ईएमएस में भी गिरावट थी, आखिरकार, क्योंकि मोबाइल पर थोड़ा छोटा हो गया, मैंने उन लोगों के लिए एक मीडिया क्वेरी का उपयोग किया। यह बहुत विस्तृत हो सकता है, लेकिन यह वही करता है जो मुझे चाहिए था।
— इवान डोनोवन
8

यह आंशिक रूप से नींव 5 में लागू किया गया है।

फ़ाइल _type.scss में उनके पास हेडर चर के दो सेट हैं:

// We use these to control header font sizes
// for medium screens and above

$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;


// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;

मध्यम के लिए, वे चर के पहले सेट के आधार पर आकार उत्पन्न करते हैं:

@media #{$medium-up} {
    h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
    h1 { font-size: $h1-font-size; }
    h2 { font-size: $h2-font-size; }
    h3 { font-size: $h3-font-size; }
    h4 { font-size: $h4-font-size; }
    h5 { font-size: $h5-font-size; }
    h6 { font-size: $h6-font-size; }
}

और डिफ़ॉल्ट यानी छोटी स्क्रीन के लिए, वे CSS बनाने के लिए चर के दूसरे सेट का उपयोग करते हैं:

h1 { font-size: $h1-font-size - $h1-font-reduction; }
h2 { font-size: $h2-font-size - $h2-font-reduction; }
h3 { font-size: $h3-font-size - $h3-font-reduction; }
h4 { font-size: $h4-font-size - $h4-font-reduction; }
h5 { font-size: $h5-font-size - $h5-font-reduction; }
h6 { font-size: $h6-font-size - $h6-font-reduction; }

आप इन चर का उपयोग कर सकते हैं और संबंधित स्क्रीन आकारों के लिए फ़ॉन्ट आकार सेट करने के लिए अपने कस्टम scss फ़ाइल में ओवरराइड कर सकते हैं।

— सुधीर
स्रोत
6

उत्तरदायी जावास्क्रिप्ट आकार भी इस जावास्क्रिप्ट कोड के साथ किया जा सकता है जिसे फ्लो टाइप कहा जाता है :

फ़्लो टाइप - उत्तरदायी वेब टाइपोग्राफी अपनी बेहतरीन: तत्व-चौड़ाई के आधार पर फ़ॉन्ट-आकार।

या यह जावास्क्रिप्ट कोड जिसे FitText कहा जाता है :

FitText - फ़ॉन्ट-आकार को लचीला बनाता है। अपने सुर्खियों के अनुपात-आधारित आकार के लिए अपने उत्तरदायी डिज़ाइन पर इस प्लगइन का उपयोग करें।

— phlegx
स्रोत
6

यदि आप बिल्ड टूल का उपयोग कर रहे हैं तो रूकसाक का प्रयास करें।

अन्यथा, आप न्यूनतम और अधिकतम फ़ॉन्ट आकार जैसे ( डेमो ) को आसानी से नियंत्रित करने के लिए सीएसएस चर (कस्टम गुण) का उपयोग कर सकते हैं :

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}
— डैनी विन्थर
स्रोत
क्या आपके पास उस रूकसाक का संदर्भ है जिसे आप बोलते हैं?
— पीटर मोर्टेंसन
5

मैंने CSS-Tricks का एक शानदार लेख देखा । यह ठीक काम करता है:

body {
    font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw -
    [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

उदाहरण के लिए:

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

हम line-heightसंपत्ति के समान समीकरण को ब्राउज़र के साथ भी बदल सकते हैं।

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}
— heyjr
स्रोत
क्या परिभाषित [अधिकतम-आकार] से अधिक नहीं होने के लिए फ़ॉन्ट-आकार बनाने का एक तरीका है?
— इगोर जानकोविक्स
4

मैं सिर्फ एक विचार के साथ आया था जिसके साथ आपको केवल एक बार प्रति तत्व फ़ॉन्ट आकार को परिभाषित करना होगा, लेकिन यह अभी भी मीडिया के प्रश्नों से प्रभावित है।

सबसे पहले, मैंने मीडिया प्रश्नों का उपयोग करके व्यूपोर्ट पर निर्भर करते हुए, "--text-scale-unit" को "1vh" या "1vw" पर सेट किया।

फिर मैं फॉन्ट-आकार के लिए कैल्क () और मेरे गुणक संख्या का उपयोग करके चर का उपयोग करता हूं:

/* Define a variable based on the orientation. */
/* The value can be customized to fit your needs. */
@media (orientation: landscape) {
  :root{
    --text-scale-unit: 1vh;
  }
}
@media (orientation: portrait) {
  :root {
    --text-scale-unit: 1vw;
  }
}


/* Use a variable with calc and multiplication. */
.large {
  font-size: calc(var(--text-scale-unit) * 20);
}
.middle {
  font-size: calc(var(--text-scale-unit) * 10);
}
.small {
  font-size: calc(var(--text-scale-unit) * 5);
}
.extra-small {
  font-size: calc(var(--text-scale-unit) * 2);
}
<span class="middle">
  Responsive
</span>
<span class="large">
  text
</span>
<span class="small">
  with one
</span>
<span class="extra-small">
  font-size tag.
</span>
स्निपेट का विस्तार करें

मेरे उदाहरण में मैंने केवल व्यूपोर्ट के अभिविन्यास का उपयोग किया है, लेकिन सिद्धांत किसी भी मीडिया प्रश्नों के साथ संभव होना चाहिए।

— Ruffo
स्रोत
2
आप बस का उपयोग नहीं करते क्यों vminऔर vmaxइस के बजाय @mediaव्यापार?
— गर्क गार्सिया
3

jQuery का "फिटटेक्स्ट" शायद सबसे अच्छा उत्तरदायी हेडर समाधान है। GitHub: https://github.com/davatron5000/FitText.js पर इसे देखें

— राघव कुकरेती
स्रोत
2
यह इस सवाल का सीधा जवाब नहीं लगता है कि फ़ॉन्ट समायोजित क्यों नहीं होता है। किसी भी मामले में, एसओ में केवल उत्तरों को प्रोत्साहित नहीं किया जाता है। कृपया अधिक विवरण / नमूना कोड जोड़ने पर विचार करें।
— हैरी
2

कई रूपरेखाओं के साथ, एक बार जब आप "ग्रिड से बाहर जाते हैं" और फ्रेमवर्क के डिफ़ॉल्ट सीएसएस को ओवरराइड करते हैं, तो चीजें बाएं और दाएं टूटने लगेंगी। फ्रेमवर्क स्वाभाविक रूप से कठोर हैं। यदि आप Zurb की डिफ़ॉल्ट H1 शैली का उपयोग उनकी डिफ़ॉल्ट ग्रिड कक्षाओं के साथ करते हैं, तो वेब पेज को मोबाइल पर ठीक से प्रदर्शित होना चाहिए (अर्थात, उत्तरदायी)।

हालाँकि, ऐसा लगता है कि आप बहुत बड़ी 6.2em हेडिंग चाहते हैं, जिसका अर्थ है कि चित्र मोड में मोबाइल डिस्प्ले के अंदर फिट होने के लिए टेक्स्ट को सिकोड़ना होगा। आपका सबसे अच्छा शर्त है कि एक उत्तरदायी टेक्स्ट jQuery प्लगइन जैसे फ्लो टाइप और फिटटेक्स्ट का उपयोग करें । अगर आप कुछ हल्का-फुल्का चाहते हैं, तो आप मेरा स्केलेबल टेक्स्ट jQuery प्लगइन देख सकते हैं:

http://thdoan.github.io/scalable-text/

नमूना उपयोग:

<script>
$(document).ready(function() {
  $('.row .twelve h1').scaleText();
}
</script>
— thdoan
स्रोत
मुझे लगता है कि उत्तरदायी उपयोग के लिए पाठ को स्केल करना / पाठ का आकार बदलना ब्राउज़र के लिए छोड़ दिया जाना चाहिए, मीडिया के प्रश्नों के लिए epsp तौर पर यह उनके लिए डिज़ाइन किया गया है।
— user254197
2

वास्तविक मूल Sass (scss नहीं) में आप पैराग्राफ और सभी शीर्षकों को स्वचालित रूप से सेट करने के लिए नीचे के मिश्रणों का उपयोग कर सकते हैं। 'font-size ।

मुझे यह पसंद है क्योंकि यह बहुत अधिक कॉम्पैक्ट है। और टाइप करने की जल्दी। इसके अलावा, यह समान कार्यक्षमता प्रदान करता है। वैसे भी, यदि आप अभी भी नए वाक्य-विन्यास से चिपके रहना चाहते हैं, तो बेझिझक मेरी Sass सामग्री को यहाँ scss में बदलें: [CONVERT SASS TO SCSS HERE]

नीचे मैं आपको चार सास मिश्रण देता हूं। आपको अपनी आवश्यकताओं के लिए उनकी सेटिंग्स को ट्विस्ट करना होगा।

=font-h1p-style-generator-manual() // You don’t need to use this one. Those are only styles to make it pretty.
=media-query-base-font-size-change-generator-manual() // This mixin sets the base body size that will be used by the h1-h6 tags to recalculate their size in a media query.
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // Here you will set the size of h1 and size jumps between h tags
=config-and-run-font-generator() // This one only calls the other ones

आपके द्वारा सेटिंग्स के साथ खेलना समाप्त करने के बाद, बस एक मिक्सिन पर एक कॉल करें - जो है: + config-and-run-font-जनरेटर () । अधिक जानकारी के लिए नीचे दिए गए कोड और टिप्पणियों को देखें।

मुझे लगता है कि आप इसे मीडिया क्वेरी के लिए स्वचालित रूप से कर सकते हैं जैसे कि हेडर टैग के लिए किया जाता है, लेकिन हम सभी अलग-अलग मीडिया प्रश्नों का उपयोग करते हैं, इसलिए यह सभी के लिए उपयुक्त नहीं होगा। मैं एक मोबाइल-प्रथम डिजाइन दृष्टिकोण का उपयोग करता हूं, इसलिए यह है कि मैं ऐसा कैसे करूंगा। इस कोड को कॉपी और उपयोग करने के लिए स्वतंत्र महसूस करें।

कॉपी और पासे को आपके फ़ाइल पर ले जाता है:

=font-h1p-style-generator-manual()
  body
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // google fonts
    font-size: 100%
    line-height: 1.3em
  %headers
    line-height: 1em
    font-weight: 700
  p
    line-height: 1.3em
    font-weight: 300
  @for $i from 1 through 6
    h#{$i}
      @extend %headers


=media-query-base-font-size-change-generator-manual()
  body
    font-size: 1.2em
  @media screen and (min-width: 680px)
    body
      font-size: 1.4em
  @media screen and (min-width: 1224px)
    body
      font-size: 1.6em
  @media screen and (min-width: 1400px)
    body
      font-size: 1.8em

=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6)
  $h1-fs: $h1-fs // Set first header element to this size
  $h1-step-down: $h1-step-down // Decrement each time by 0.3
  $p-same-as-hx: $p-same-as-hx // Set p font-sieze same as h(6)
  $h1-fs: $h1-fs + $h1-step-down // Looping correction
  @for $i from 1 through 6
    h#{$i}
      font-size: $h1-fs - ($h1-step-down * $i)
    @if $i == $p-same-as-hx
      p
        font-size: $h1-fs - ($h1-step-down * $i)

// RUN ONLY THIS MIXIN. IT WILL TRIGGER THE REST
=config-and-run-font-generator()
  +font-h1p-style-generator-manual() // Just a place holder for our font style
  +media-query-base-font-size-change-generator-manual() // Just a placeholder for our media query font size
  +h1p-font-size-generator-auto($h1-fs: 2em, $h1-step-down: 0.2, $p-same-as-hx: 5) // Set all parameters here

अपनी आवश्यकताओं के लिए सभी मिश्रण - आईटी के साथ खेलते हैं! :) और इसके साथ अपने सामान्य कोड के शीर्ष पर इसे कॉल करें:

+config-and-run-font-generator()

इससे यह आउटपुट उत्पन्न होगा। आप परिणामों के विभिन्न सेट उत्पन्न करने के लिए मापदंडों को अनुकूलित कर सकते हैं। हालाँकि, क्योंकि हम सभी अलग-अलग मीडिया प्रश्नों का उपयोग करते हैं, कुछ मिश्रण आपको मैन्युअल रूप से (शैली और मीडिया) संपादित करने होंगे।

उत्पन्न सीएसएस:

body {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.3em;
  word-wrap: break-word; }

h1, h2, h3, h4, h5, h6 {
  line-height: 1em;
  font-weight: 700; }

p {
  line-height: 1.3em;
  font-weight: 300; }

body {
  font-size: 1.2em; }

@media screen and (min-width: 680px) {
  body {
    font-size: 1.4em; } }
@media screen and (min-width: 1224px) {
  body {
    font-size: 1.6em; } }
@media screen and (min-width: 1400px) {
  body {
    font-size: 1.8em; } }
h1 {
  font-size: 2em; }

h2 {
  font-size: 1.8em; }

h3 {
  font-size: 1.6em; }

h4 {
  font-size: 1.4em; }

h5 {
  font-size: 1.2em; }

p {
  font-size: 1.2em; }

h6 {
  font-size: 1em;

}
— DevWL
स्रोत
2

मैं इन सीएसएस कक्षाओं का उपयोग करता हूं, और वे किसी भी स्क्रीन आकार पर मेरा पाठ द्रव बनाते हैं:

.h1-fluid {
    font-size: calc(1rem + 3vw);
    line-height: calc(1.4rem + 4.8vw);
}

.h2-fluid {
    font-size: calc(1rem + 2vw);
    line-height: calc(1.4rem + 2.4vw);
}

.h3-fluid {
    font-size: calc(1rem + 1vw);
    line-height: calc(1.4rem + 1.2vw);
}

.p-fluid {
    font-size: calc(1rem + 0.5vw);
    line-height: calc(1.4rem + 0.6vw);
}
— भनभनाना
स्रोत
1 
 h1 { font-size: 2.25em; } 
 h2 { font-size: 1.875em; }
 h3 { font-size: 1.5em; }
 h4 { font-size: 1.125em; }
 h5 { font-size: 0.875em; }
 h6 { font-size: 0.75em; }
— राजा रेहान
स्रोत
6
हालांकि यह कोड स्निपेट प्रश्न को हल कर सकता है, जिसमें स्पष्टीकरण सहित वास्तव में आपकी पोस्ट की गुणवत्ता में सुधार करने में मदद करता है। याद रखें कि आप भविष्य में पाठकों के लिए प्रश्न का उत्तर दे रहे हैं, और उन लोगों को आपके कोड सुझाव के कारणों का पता नहीं चल सकता है।
— टोनी बबेरिनो
एक स्पष्टीकरण क्रम में होगा।
— पीटर मोर्टेंसन
1

निम्नलिखित तरीके हैं जिनके द्वारा आप इसे प्राप्त कर सकते हैं:

  1. उदाहरण के लिए रेम का प्रयोग करें 2.3 रेम
  2. उदाहरण के लिए उन्हें प्रयोग करें 2.3em
  3. उदाहरण के लिए% का उपयोग करें 2.3% इसके अलावा, आप उपयोग कर सकते हैं: vh, vw, vmax और vmin।

ये इकाइयाँ स्क्रीन की चौड़ाई और ऊँचाई के आधार पर निरंकुश होंगी।

— प्रियांशु तिवारी
स्रोत
1

यदि आप इसे vw (व्यूपोर्ट चौड़ाई) में परिभाषित करते हुए फ़ॉन्ट आकार को उत्तरदायी बना सकते हैं। हालांकि, सभी ब्राउज़र इसका समर्थन नहीं करते हैं। समाधान का उपयोग ब्राउज़र की चौड़ाई के आधार पर बेस फ़ॉन्ट आकार को बदलने और सभी फ़ॉन्ट आकारों को% में सेट करने के लिए जावास्क्रिप्ट का उपयोग करना है।

यहाँ एक लेख दिया गया है कि कैसे उत्तरदायी फोंट बनाना है: http://wpsalt.com/responsive-font-size-in-wordpress-theme/

— दिमित्री पोचटेननीख
स्रोत
यह लिंक टूटा हुआ प्रतीत होता है: "403 निषिद्ध। नग्नेक्स / 1.10.3"
— पीटर मोर्टेंसन
1

मुझे इसका समाधान मिल गया है, और यह मेरे लिए बहुत अच्छा काम करता है:

/* Fluid font size:
minimum font size at min. device width 300px = 14
maximum font size at max. device width 1600px = 26
*/

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}
— भनभनाना
स्रोत
1

डेस्कटॉप और मोबाइल / टैबलेट दोनों पर अच्छा दिखने के लिए पाठ की समस्या को हल करने का एक तरीका भौतिक सेंटीमीटर या इंच जैसी भौतिक इकाइयों को पाठ का आकार तय करना है, जो स्क्रीन पीपीआई (अंक प्रति इंच) पर निर्भर नहीं करता है।

इस जवाब के आधार पर , नीचे एक उत्तरदायी फ़ॉन्ट आकार के लिए HTML दस्तावेज़ के अंत में उपयोग किया गया कोड है:

<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
  var devicePixelRatio = window.devicePixelRatio || 1;
  dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
  dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;

  function setFontSizeForClass(className, fontSize) {
      var elms = document.getElementsByClassName(className);
      for(var i=0; i<elms.length; i++) {
          elms[i].style.fontSize = String(fontSize * dpi_y / 96) + "px";
      }
  }

  setFontSizeForClass('h1-font-size', 30);
  setFontSizeForClass('action-font-size', 20);
  setFontSizeForClass('guideline-font-size', 25);
  // etc for your different classes
</script>

एक अलग वर्ग के आइटम के ऊपर कोड में भौतिक इकाइयों में फ़ॉन्ट आकार निर्दिष्ट किए जाते हैं, जब तक कि ब्राउज़र / ओएस अपनी स्क्रीन के पीपीआई के लिए सही ढंग से कॉन्फ़िगर नहीं किया जाता है।

एक भौतिक-इकाई फ़ॉन्ट हमेशा बहुत बड़ा नहीं है और बहुत छोटा नहीं है, इसलिए जब तक स्क्रीन की दूरी सामान्य नहीं होती (पुस्तक-पढ़ने की दूरी)।

— सर्ज रोजेक
स्रोत
1

पाठ का आकार एक vwइकाई के साथ सेट किया जा सकता है , जिसका अर्थ है "व्यूपोर्ट चौड़ाई"। इस तरह से पाठ का आकार ब्राउज़र विंडो के आकार का अनुसरण करेगा:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text

अपने निजी प्रोजेक्ट के लिए मैंने vw और @meida का उपयोग किया। यह पूरी तरह से काम करता है।

.mText {
    font-size: 6vw;
}

@media only screen and (max-width: 1024px) {
    .mText {
        font-size: 10vw;
    }
}


.sText {
    font-size: 4vw;
}

@media only screen and (max-width: 1024px) {
    .sText {
        font-size: 7vw;
    }
}
— पीटर मोर्टेंसन
स्रोत
1

इस समीकरण का उपयोग करें:

calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

1440 और 768 से बड़ी या छोटी किसी भी चीज के लिए, आप या तो इसे स्थिर मूल्य दे सकते हैं, या समान दृष्टिकोण लागू कर सकते हैं।

Vw समाधान के साथ दोष यह है कि आप एक स्केल अनुपात सेट नहीं कर सकते हैं, स्क्रीन रिज़ॉल्यूशन 1440 पर 5vw कह सकते हैं, 60px फ़ॉन्ट-आकार, आपके विचार फ़ॉन्ट आकार, लेकिन जब आप विंडो की चौड़ाई को 768 तक घटाते हैं, तो यह समाप्त हो सकती है 12px होने के नाते, न्यूनतम नहीं जो आप चाहते हैं।

इस दृष्टिकोण के साथ, आप अपनी ऊपरी सीमा और निचली सीमा निर्धारित कर सकते हैं, और फ़ॉन्ट बीच में ही स्केल हो जाएगा।

— Shuwei
स्रोत
1

हम css से calc () का उपयोग कर सकते हैं

p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}

गणितीय सूत्र कैल्क (मिनीसाइज़ + (अधिकतम-मिनीसाइज़)) * (१०० वीएम - मिनिवपोर्टपोर्ट) / (मैक्सविज़नव्यूपोर्ट - मिनिवपोर्टपोर्ट)) है।

Codepen

— निको जेएल
स्रोत
0

मुझे डर है कि फ़ॉन्ट आकार के संबंध में कोई आसान समाधान नहीं है। आप मीडिया क्वेरी का उपयोग करके फ़ॉन्ट आकार बदल सकते हैं, लेकिन तकनीकी रूप से यह आसानी से आकार नहीं देगा। एक उदाहरण के लिए, यदि आप उपयोग करते हैं:

@media only screen and (max-width: 320px){font-size: 3em;}

font-size300 पिक्सल और 200 पिक्सेल चौड़ाई के लिए आपका 3em दोनों होगा। लेकिन font-sizeसही उत्तरदायी बनाने के लिए आपको 200px चौड़ाई के लिए कम की आवश्यकता है ।

तो, वास्तविक समाधान क्या है? एक ही रास्ता है। आपको अपने टेक्स्ट से PNG इमेज (पारदर्शी बैकग्राउंड के साथ) बनानी होगी। उसके बाद आप आसानी से अपनी छवि को उत्तरदायी बना सकते हैं (उदाहरण के लिए: चौड़ाई: 35%; ऊँचाई: 28px)। इस तरह से आपका पाठ सभी उपकरणों के साथ पूरी तरह उत्तरदायी होगा।

— user1712287
स्रोत
0

कई निष्कर्षों के बाद मैं इस संयोजन के साथ समाप्त हुआ:

@media only screen and (max-width: 730px) {

    h2 {
        font-size: 4.3vw;
    }
}
— हर्ष गुप्ता
स्रोत
-1

यहाँ कुछ है जो मेरे लिए काम किया है। मैंने केवल एक iPhone पर इसका परीक्षण किया।

चाहे आपके पास हो h1, h2या pटैग आपके पाठ के आसपास हों:

<h1><font size="5">The Text you want to make responsive</font></h1>

यह एक डेस्कटॉप पर 22pt पाठ प्रस्तुत करता है और यह अभी भी iPhone पर पठनीय है।

<font size="5"></font>
— DMartin
स्रोत
14
यह 2015 का है। फॉन्ट टैग को HTML5 के रूप में चित्रित किया गया है।
— दान एच।
मुझे लगा कि फ़ॉन्ट टैग अप्रचलित है। डेवलपर pmozilla.org/en-US/docs/Web/HTML/Element/font मुझे नहीं लगता कि यह अभी तक हटा दिया गया है, लेकिन यह किसी बिंदु पर होगा।
— जेक
1
@ जेक: यह HTML4 में पदावनत किया गया था और HTML5 के साथ अप्रचलित है। हटाना पदावनति का अनुसरण करता है, न कि दूसरे तरीके का।
— santon
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.