मैं https://css-tricks से कोड के साथ एक द्रव फ़ॉन्ट-आकार का उपयोग करना चाहता हूं .com/snippets/css/fluid-typography/ । लेकिन मेरा सीएसएस मेयर रीसेट (फ़ॉन्ट: इनहेरिट;) कोड को ओवरराइड करने लगता है। मुझे नहीं पता क्यों? यहाँ कोड है:

सीएसएस रीसेट सीएसएस:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;

}

16px और 40px के बीच एक द्रव फ़ॉन्ट-आकार प्राप्त करने के लिए सीएसएस स्टाइलशीट में बाद में कोड;

html {
  font-size: 16px;
}

@media screen and (min-width: 320px) {
  :root {
    font-size: calc(16px + (40 - 16) * ((100vw - 320px) / (1000 - 320)));
  }
}
@media screen and (min-width: 1000px) {
  :root {
    font-size: 40px;
  }
}

फिर जब मैं ब्राउज़र में 700px ब्राउज़र आकार का निरीक्षण करता हूं तो बाद वाले सीएसएस द्रव कोड को "फ़ॉन्ट: इनहेरिट;" द्वारा अधिलेखित कर दिया जाता है। सीएसएस रीसेट कोड में। इसलिए यह द्रव कोड के साथ काम नहीं कर रहा है। कोई विचार? यह काम कर रहा है या नहीं?

चित्र। ब्राउज़र में निरीक्षण उपकरण दिखाता है कि बाद वाला कोड सक्रिय नहीं है?

द्रव फ़ॉन्ट कोड काम करता है लेकिन यह मुझे भ्रमित करता है कि निरीक्षक उपकरण दिखाता है कि यह लागू नहीं होता है और केवल यह दिखाता है कि रीसेट सीएसएस फ़ॉन्ट: विरासत लागू हो जाता है। क्यों?

0
user9511391 4 अप्रैल 2020, 11:32
लेकिन यह इनहेरिट है, इसलिए यह आपके द्वारा परिभाषित किए जा रहे मान को इनहेरिट करके काम करेगा: jsfiddle.net/2m7vtj9x (resize और देखो)
 – 
Temani Afif
4 अप्रैल 2020, 11:37
तो आपका मतलब है कि मेरा कोड वास्तव में काम करता है, भले ही सीएसएस रीसेट फ़ॉन्ट संपत्ति द्रव मीडिया क्वेरी कोड को ओवरराइड करती है?
 – 
user9511391
4 अप्रैल 2020, 12:39
इसे स्वयं परीक्षण करें और देखें। मुझे लगता है कि आप जानते हैं कि इसे कैसे व्यवहार करना चाहिए ताकि आप देख सकें कि यह काम कर रहा है या नहीं
 – 
Temani Afif
4 अप्रैल 2020, 12:46
ऐसा लगता है लेकिन यह मुझे भ्रमित करता है कि निरीक्षण उपकरण मीडिया क्वेरी कोड को रद्द कर देता है। मेरे लिए जो कहता है कि यह लागू नहीं होता है? तस्वीर देखो।
 – 
user9511391
4 अप्रैल 2020, 13:07

1 उत्तर

सबसे बढ़िया उत्तर

एमडीएन: इनहेरिट

इनहेरिट सीएसएस कीवर्ड उस तत्व का कारण बनता है जिसके लिए संपत्ति के गणना मूल्य को उसके मूल तत्व से लेने के लिए निर्दिष्ट किया गया है।

इसलिए यदि मीडिया क्वेरी का css नियम :root पर लागू होता है और उसके वंशजों के पास font: inhert है, तो वे :root से फ़ॉन्ट सेटिंग्स को इनहेरिट करेंगे।

यदि सभी तत्व (जैसे p) में font-size सेट inherit नहीं होता, लेकिन इसके बजाय गणना मूल्य होता, तो आप किसी निश्चित तत्व के फ़ॉन्ट आकार को नहीं बदल सकते थे और उन्हें सेटिंग्स इसके वंशजों के लिए प्रचारित होती हैं, लेकिन आपको इसे प्रत्येक वंशज पर भी सेट करना होगा। तो font-… गुण inherit पर सेट होने का इरादा व्यवहार है।

यहां font-size सीधे प्रत्येक तत्व पर लागू होता है, यदि आप p का फ़ॉन्ट आकार बदलते हैं तो यह span के लिए लागू नहीं होता है:

* {
  font-size: 20px;
}

p {
  font-size: 10px;
}
<div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd <span>gubergren</span>, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
</div>

दूसरी ओर, यदि font-size inherit है, तो यदि आप font-size सेट करते हैं तो यह बच्चों में फैल जाएगा।

* {
  font-size: inherit;
}

div {
  font-size: 20px;
}


p {
  font-size: 10px;
}
<div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd <span>gubergren</span>, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
</div>
0
t.niese 4 अप्रैल 2020, 13:36
लेकिन जब मैं आपके कोड का निरीक्षण करता हूं तो यह इनहेरिट वैल्यू को ओवरराइड करता है। चित्र देखें imgur.com/a/V86tJMQ । मेरे कोड में बाद वाला सीएसएस कोड इनहेरिट वैल्यू को ओवरराइड नहीं करता है (मेरी पोस्ट में चित्र देखें)।
 – 
user9511391
4 अप्रैल 2020, 13:17
दोनों स्निपेट में <span>gubergren</span> तत्व को देखें। पहले एक में आकार सभी तत्वों पर लागू होता है, इसलिए p को बदलने से span (जो वह नहीं है जो आप सामान्य रूप से चाहते हैं) को प्रभावित नहीं करता है, दूसरे उदाहरण में सभी तत्वों में inherit को छोड़कर जिसके लिए आकार निर्धारित किया गया है, इसलिए span को p का आकार विरासत में मिला है।
 – 
t.niese
4 अप्रैल 2020, 13:34
मुझे यह समझ आ गया। और इसलिए मुझे उम्मीद है कि इंस्पेक्टर टूल मेरे मीडिया क्वेरी कोड को लागू करेगा और इसे ओवरराइड नहीं करेगा (मेरी पहली पोस्ट में चित्र देखें)। निरीक्षक उपकरण दिखाता है कि फ़ॉन्ट-आकार विरासत में मिला है और इसके बजाय उस नियम को लागू करता है (और मीडिया क्वेरी कोड को पार करता है जो वह कोड है जिसका मैं उपयोग करना चाहता हूं)।
 – 
user9511391
4 अप्रैल 2020, 13:45
द्रव फ़ॉन्ट कोड काम करता है लेकिन यह मुझे भ्रमित करता है कि निरीक्षक उपकरण दिखाता है कि यह लागू नहीं होता है और केवल यह दिखाता है कि रीसेट सीएसएस फ़ॉन्ट: विरासत लागू हो जाता है।
 – 
user9511391
4 अप्रैल 2020, 13:54
क्योंकि आपकी मीडिया क्वेरी font-size को :root पर लागू किया गया है, न कि आपके p तत्व पर, फ़ॉन्ट का आकार :root तत्व के लिए गणना के अनुसार है। और आपके p के लिए: यह तत्व अपने मूल के गणना मान को विरासत करता है, इसलिए font-size के लिए :root का नियम इसके द्वारा प्रचारित होता है वंशज जब तक कि किसी भी वंशज ने इसे स्पष्ट रूप से एक अलग नियम के लिए निर्धारित नहीं किया है। यदि आप परिकलित जानकारी चाहते हैं तो निरीक्षक को Computed देखें न कि Style पर। Styles इस बात के नियम हैं कि मूल्य की गणना कैसे की जानी चाहिए, न कि अंतिम मान।
 – 
t.niese
4 अप्रैल 2020, 13:58