मीडिया प्रश्नों की अल्पविराम से अलग सूची

Question

मैं AngularJS और SCSS के साथ एक साइट कोडिंग कर रहा हूं। मैं विकास के मोबाइल चरण में हूं और मैंने जल्दी से (इस परियोजना के लिए) खोज की है कि मुझे @media क्वेरी का उपयोग करके एकाधिक ब्रेकपॉइंट्स को लक्षित करने का एक तरीका चाहिए। तो मुझे this SO answer और this CSS Tricks Post के साथ-साथ SO पर कई अन्य उत्तरों के माध्यम से मिला। फिर मैंने परीक्षण-मामले में मिले समाधानों को लागू किया, परीक्षण के लिए नीचे स्निपेट देखें।

main { 
    background-color: grey; 
    height: 100%; 
    min-height: 1000px; 

    @media (max-width: 992px) { 
     background-color: red 
    } 

    @media (max-width: 768px) { 
     background-color: lightcoral 
    } 

    @media (max-width: 992px), (max-width: 992px) and (orientation: landscape) { 
     background-color: lightgreen; 
    } 

    @media (max-width: 768px), 
    (max-width: 768px) and (orientation: landscape) { 
     background-color: lightblue; 
     // Reset the min-height here, because we no longer have the sticky search bar. 
     min-height: 450px; 
    } 
} 

<main> 
    <h1>Page Title</h1> 
    <h2>Some Descriptive information</h2> 

    <div>Content</div> 
</main> 

लेकिन मैं यह काम करने के लिए प्राप्त करने में सक्षम नहीं किया गया है। मैं जो करने की कोशिश कर रहा हूं, आखिरकार, ऐसी शैलियों हैं जो लागू होती हैं जब उपयोगकर्ता टेबलेट पर परिदृश्य में होता है, या फ़ोन। हालांकि, मुझे नहीं पता कि मैं इसे सही कर रहा हूं, या or ऑपरेटर का सही ढंग से उपयोग कर रहा हूं।

यह सादा काम नहीं करता है, ठीक है, पहला कथन (उदाहरण के लिए: (max-width: 992px)) काम करता है, लेकिन दूसरा दूसरा सत्य का मूल्यांकन नहीं करता है। मोज़िला के अनुसार:

अल्पविराम से अलग सूचियां तार्किक ऑपरेटर की तरह व्यवहार करती हैं या मीडिया प्रश्नों में उपयोग की जाती हैं। मीडिया प्रश्नों की अल्पविराम से अलग सूची का उपयोग करते समय, यदि कोई भी मीडिया प्रश्न सत्य लौटाता है, तो शैलियों या स्टाइल शीट लागू हो जाती हैं। अल्पविराम से अलग सूची में प्रत्येक मीडिया क्वेरी को एक व्यक्तिगत क्वेरी के रूप में माना जाता है, और किसी भी ऑपरेटर को एक मीडिया क्वेरी पर लागू किया जाता है जो दूसरों को प्रभावित नहीं करता है। --- Mozilla Documentation

यहां तक ​​कि अगर मैं दो अलग-अलग मीडिया के प्रश्नों में कोड को तोड़ने:

@media (max-width: 992px) { 
    background-color: lightgreen; 
} 
@media (max-width: 992px) and (orientation: landscape) { 
    background-color: lightgreen; 
} 

यह अभी भी काम नहीं करता। तो मुझे नहीं पता कि मैं गलत चौड़ाई (जब परिदृश्य में) या मैं क्या गलत कर रहा हूं को लक्षित कर रहा हूं। क्या कोई अन्य फ्रंट-एंड डेवलपर्स वहां बता सकता है कि मेरे अल्पविराम से अलग मीडिया प्रश्न क्यों काम नहीं कर रहे हैं?

संपादित करें:

main { 
    background-color: $mono-90; 
    height: 100%; 
    min-height: 1000px; 

    @media screen and (max-width: map_get($grid-breakpoints, 'md')) { 
     // Reset the min-height here, because we no longer have the sticky search bar. 
     min-height: 450px; 
    } 

    @media 
    (max-width: map_get($grid-breakpoints, 'lg')), 
    (max-width: map_get($grid-breakpoints, 'lg')) and (orientation: landscape){ 
     background-color: lightgreen; 
    } 

    @media 
    (max-width: map_get($grid-breakpoints, 'md')), 
    (max-width: map_get($grid-breakpoints, 'md')) and (orientation: landscape){ 
     background-color: lightblue; 
    } 

    @media 
    (max-width: map_get($grid-breakpoints, 'sm')), 
    (max-width: map_get($grid-breakpoints, 'sm')) and (orientation: landscape){ 
     background-color: lightcoral; 
    } 
} 

संपादित करें: यहाँ देशी एससीएसएस कोड है,

main { 
    background-color: $mono-90; 
    height: 100%; 
    min-height: 1000px; 

    @media screen and (max-width: map_get($grid-breakpoints, 'md')) { 
     // Reset the min-height here, because we no longer have the sticky search bar. 
     min-height: 450px; 
    } 

    @media screen and (max-width: map_get($grid-breakpoints, 'lg')) { 
     background-color: lightgreen; 
    } 

    @media screen and (max-width: map_get($grid-breakpoints, 'md')) { 
     background-color: lightblue; 
    } 

    @media screen and (max-width: map_get($grid-breakpoints, 'sm')) { 
     background-color: lightcoral; 
    } 
} 

हालांकि: @Godwin की सिफारिश के अनुसार मैं इस के लिए मेरे @media प्रश्नों को सरल बनाया, यह आईपैड लैंडस्केप (1024x768) पर काम नहीं करता है। I लैपटॉप पर दिखाना नहीं चाहते हैं, लेकिन लैंडस्केप स्थिति में आईपैड पर दिखाना चाहते हैं।

Answer 1

हालांकि, यह आईपैड लैंडस्केप (1024x768) पर काम नहीं करता है। मैं इसे लैपटॉप पर दिखाना नहीं चाहता, लेकिन यह लैंडस्केप स्थिति में आईपैड पर दिखाना चाहता है।

मुझे यकीन है कि क्या आप यह द्वारा तय कर रहे हैं, क्योंकि आप अपने उदाहरण में कुछ भी छुपा नहीं कर रहे हैं रहा हूँ तो मैं का उल्लेख करने वाले नहीं कर रहा हूँ:

मुझे क्या करना कोशिश कर रहा हूँ क्या आखिरकार, ऐसी शैलियों हैं जो लागू होती हैं जब उपयोगकर्ता टेबलेट पर परिदृश्य में होता है, या फ़ोन।

Orientation on MDM निम्नलिखित के रूप में परिभाषित किया गया है:

यह मान वास्तविक डिवाइस अभिविन्यास के अनुरूप नहीं है।

यह इंगित करता है कि व्यूपोर्ट परिदृश्य में है (प्रदर्शन लंबा है उससे बड़ा है) या चित्र (प्रदर्शन इसकी तुलना में लंबा है) मोड।

आपने कहा है कि परिदृश्य में आपके आईपैड में 1024x768 का संकल्प है, इसलिए आईपैड या लैंडस्केप मोड में एक फोन को लक्षित करने के लिए, आप अधिकतम डिवाइस की 1024px की चौड़ाई वाले सभी डिवाइसों को लक्षित कर सकते हैं और लैंडस्केप मोड में हैं (प्रदर्शन व्यापक की तुलना में यह लंबा है):

main { 
    background-color: grey; 
    height: 100%; 
    min-height: 1000px; 
    width: 100%; 

    @media screen and (max-width: 1024px) and (orientation: landscape) { 
    background-color: lightblue; 
    } 
} 

आप this codepen पर एक उदाहरण देख सकते हैं।

आपका व्यूपोर्ट चौड़ाई 1024px गुणा से अधिक है, तो main तत्व कोई बात नहीं क्या ग्रे रंग का होगा।

आप अपने ब्राउज़र विंडो का आकार बदलने की चौड़ाई के बराबर या 1024px गुणा से भी कम समय के साथ एक व्यूपोर्ट के लिए, और उदाहरण के एक iPad के लिए, एक व्यूपोर्ट (प्रदर्शन व्यापक की तुलना में यह लंबा है) परिदृश्य में माना जाता है, तो लैंडस्केप मोड (1024x768) में, मीडिया क्वेरी को गति प्रदान और लागू होगी एक नीले रंग की पृष्ठभूमि:

आप अपने ब्राउज़र विंडो का आकार बदलने अभी भी बराबर या 1024px गुणा से भी कम समय के साथ एक के साथ एक व्यूपोर्ट के लिए है, लेकिन एक ऊंचाई है आपकी चौड़ाई से अधिक, व्यूपोर्ट अब consi नहीं है लैंडस्केप मोड में होने का अनुमान है लेकिन पोर्ट्रेट मोड पर स्विच करें। इस समय, मीडिया क्वेरी नहीं रह गया है शुरू किया जा रहा है और हम एक ग्रे तत्व पर वापस आने:

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

Answer 2

यहाँ एक समाधान आशा है यह आप

main { 
 
    background-color: grey; 
 
    height: 100%; 
 
    min-height: 1000px; 
 
} 
 
     
 
    @media (max-width: 992px) and (orientation:portrait) { 
 
\t \t main{ 
 
     background-color: red 
 
\t \t } 
 
    } 
 

 
    @media (max-width: 768px) and (orientation:portrait) { 
 
\t \t main{ 
 
     background-color: lightcoral 
 
\t \t } 
 
    } 
 
@media (max-width: 992px) and (orientation: landscape) { 
 
\t \t main{ 
 
     background-color: lightgreen; 
 
\t \t } 
 
    } 
 

 
    @media (max-width: 768px) and (orientation: landscape) { 
 
\t \t main{ 
 
     background-color: lightblue; 
 
     min-height: 450px; 
 
\t \t } 
 
    }

<main> 
 
    <h1>Page Title</h1> 
 
    <h2>Some Descriptive information</h2> 
 

 
    <div>Content</div> 
 
</main>