मैं उन तत्वों के आकार के आधार पर मीडिया के प्रश्नों का उपयोग करना चाहूंगा divजिनके वे अंदर हैं। मैं स्क्रीन आकार का उपयोग नहीं कर सकता क्योंकि divवेबपेज के भीतर विजेट की तरह ही इसका उपयोग किया जाता है, और इसका आकार भिन्न हो सकता है।

अपडेट करें

लगता है अब इस पर काम चल रहा है: https://github.com/ResponsiveImagesCG/cq-dosos

css media-queries

— Yazz.com
स्रोत

2

मुझे लगता है कि यह प्रश्न एक अच्छा उत्तर पाने के लिए बहुत संक्षिप्त है। शायद आप एक उदाहरण प्रदान कर सकते हैं कि आप क्या करने की कोशिश कर रहे हैं? शायद अपने विचार का परीक्षण करने के लिए jsfiddle.net का उपयोग करें और दूसरों को आपकी मदद करने की अनुमति दें? आम तौर पर आप जो पूछ रहे हैं उसका कोई कारण नहीं होना चाहिए, आपको सीएसएस के साथ मीडिया के प्रश्नों के बिना वांछित परिणाम प्राप्त करने में सक्षम होना चाहिए। आप नेस्टेड तत्वों को स्केल करने के लिए फोंट के लिए प्रतिशत आयाम और ईएमएस का उपयोग कर सकते हैं। लेकिन शायद मुझे बेहतर समझने के लिए अपने html कोड और css का एक उदाहरण देखना होगा?

— बेनेवेने सेप

1

आपके विजेट का आकार कैसे भिन्न हो सकता है? क्या आपके पृष्ठ की चौड़ाई (उदाहरण के अनुसार 960px) 1024px से अधिक है या दोनों तरल पदार्थ हैं? यह स्पष्ट नहीं है और यह जानने के लिए उपयोगी होगा

— फेलिपएल्स

3

दरअसल, मेरे मौजूदा प्रोजेक्ट की भी ऐसी ही स्थिति है। विस्तृत उपकरणों के लिए 2-col लेआउट में या संकीर्ण उपकरणों के लिए 1-col लेआउट में आइटमों की एक सूची प्रदर्शित की जाती है, लेकिन एक एकल आइटम 1-col लेआउट में होगा चाहे कोई भी हो। सूची और एकल संस्करण दोनों में 2 तत्व हैं जो काफी व्यापक और संक्षिप्त हैं। व्यापक उपकरणों पर, 2 तत्व अगल-बगल दिखते हैं। आदर्श रूप से, संकीर्ण डिवाइस: हमेशा लंबवत, विस्तृत उपकरण: हमेशा समानांतर, कहीं न कहीं (1 या 2-क्षेत्र के आधार पर): ऊर्ध्वाधर या समानांतर। फ्लोटिंग सरल उपाय है, लेकिन लेआउट के आधार पर चौड़ाई में भी अंतर होना चाहिए।

— cimmanon

1

LESS को CSS में संकलित किया जाएगा, इसलिए यदि CSS इसका समर्थन नहीं करता है, तो LESS आपकी सहायता नहीं कर सकता है।

— jvannistelrooy

3

लिंक अब सक्रिय नहीं है?

— मिश्रण 3 डी

228

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

यदि आपको divअपने पृष्ठ पर एक निश्चित तत्व के आकार के आधार पर शैलियों को लागू करने की आवश्यकता है , तो आपको divमीडिया प्रश्नों के बजाय उस तत्व के आकार में परिवर्तन देखने के लिए जावास्क्रिप्ट का उपयोग करना होगा ।

— बोल्टकॉक
स्रोत

मैंने किसी तरह से इस बारे में सुना कि मैं मीडिया तत्वों के साथ फ़ंक्शंस का उपयोग करने में सक्षम हो सकता हूं, जिसमें किसी तत्व से आकार प्राप्त किया जा सके। तत्वों को आकार देने के लिए क्या मैं मीडिया प्रश्नों के साथ इसे जोड़ सकता हूं?

— Yazz.com

1

आपको समय-समय पर अपने तत्व की चौड़ाई प्राप्त करने के लिए जेएस का उपयोग करना होगा और तदनुसार प्रतिक्रिया करना होगा (समय-समय पर = प्रत्येक सेकंड या तो या यह कुछ ब्राउज़रों को धीमा कर सकता है; तदनुसार = क्लास को अपने विजेट स्टाइल करके टॉगल करके अगर आप सबसे तेज़ विधि चाहते हैं)।

— फेलिपएल्स

6

इसे मूल रूप से पूरा करने के लिए, हमें @elementप्रश्नों की आवश्यकता होगी । W3C के पास कुछ अच्छे दस्तावेज हैं जो @mediaप्रश्नों के कारण / कारण हैं : w3.org/TR/css3-mediaqueries/#width (यह लिंक आपको चौड़ाई पर चर्चा करने वाले अनुभाग में ले जाता है --- मीडिया प्रकार की चौड़ाई, भीतर मौजूद तत्व नहीं)

— डावसन

इसे ईमेल में काम करने का कोई मौका? जब कंटेनर div बहुत छोटा है (यानी जब जीमेल डेस्कटॉप वर्जन ईमेल स्पेस बहुत छोटा है, तो 2-कॉलम डिजाइन फिट करने के लिए, उदाहरण के लिए विंडो का आकार बदलने के कारण) मैं मोबाइल स्टाइलिंग को लागू करने की कोशिश कर रहा हूं।

— लेव

वैसे, @ ईमेल क्वेश्चन सीएसएस को ट्यूरिंग की पूरी भाषा बना देगा

— निक

117

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

https://github.com/marcj/css-element-queries

— मार्क जे। श्मिट
स्रोत

5

धन्यवाद, मैं प्रभावित हूं

— Yazz.com

5

यह अविश्वसनीय है। उत्तरदायी बूटस्ट्रैप के साथ संयुक्त मैं कुछ भयानक सामान कर रहा हूं जो कि केवल @media के साथ हासिल नहीं किया जा सकता है। बहुत बढ़िया।

— अकु

3

आपने हमारे जीवन को बचाया

— बड़ौदा नोएल

वाह, वास्तव में अच्छा है, चीजों को बहुत आसान बनाता है

— kaiser

ठंडा। सवाल है। इस प्लग इन का पता लगाएं - क्या तत्वों को min-widthनवीनीकरण की आवश्यकता है; क्या मुझे सीएसएस श्रेणी सूची, चिह्नित तत्वों को मैन्युअल रूप से लिखने की आवश्यकता है, min-widthनवीनीकरण के लिए सक्षम ?

— अलेक्जेंडर गोंचारोव

38

एक iframe के अंदर एक मीडिया क्वेरी एक तत्व क्वेरी के रूप में कार्य कर सकती है। मैंने इसे सफलतापूर्वक लागू किया है। ज़र्ब द्वारा उत्तरदायी विज्ञापन के बारे में हालिया पोस्ट से यह विचार आया । कोई जावास्क्रिप्ट नहीं!

— haddnin
स्रोत

मुझे लगता है कि यह सबसे अच्छा समाधान है, क्योंकि, iframe में मीडिया क्वेरीज़ काम करती हैं।

— एमफी

25

यह वर्तमान में अकेले सीएसएस के साथ संभव नहीं है क्योंकि @BoltClock ने स्वीकृत उत्तर में लिखा है, लेकिन आप जावास्क्रिप्ट का उपयोग करके उसके आसपास काम कर सकते हैं।

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

.element:container(width > 99px) {
    /* If its container is at least 100px wide */
}

https://github.com/ausi/cq-prolyfill

— ausi
स्रोत

2

यह जेएस से भरा है। लक्ष्य केवल सीएसएस में कार्यक्षमता है।

— ग्रीन

13

Prolyfills (और polyfills ) आमतौर पर JS में एक ऐसी सुविधा को सक्षम करने के लिए लिखा जाता है जो अभी तक ब्राउज़र द्वारा समर्थित नहीं है। सीएसएस में इस सुविधा का समर्थन करने के बाद प्रोलिफ़िल का लक्ष्य अप्रचलित हो जाना है।

— मौसी

3

@ प्रश्न में "सीएसएस केवल" का कोई उल्लेख नहीं है। आप उस निष्कर्ष पर किस तरह से पहुंचे?

— मौसी

1

आप को छोड़कर @ius नहीं कर सकते संभवतः सीएसएस में ऐसा इसलिए सीएसएस का एक समाधान के बाहर की पेशकश पूरी तरह से उचित है। "नो

— वेस्ले स्मिथ

1

@ DelightedD0D मेरी टिप्पणी के बाद उसने उत्तर बदल दिया और मैंने बदलाव के लिए +1 वोट किया। वर्तमान उत्तर मेरे लिए ठीक है क्योंकि यह बता रहा है कि यह केवल सीएसएस के साथ संभव नहीं है।

— ius

17

मैं एक ही समस्या में कुछ साल पहले भाग गया और मेरे काम में मेरी मदद करने के लिए एक प्लगइन के विकास को वित्त पोषित किया। मैंने प्लगइन को ओपन-सोर्स के रूप में जारी किया है ताकि अन्य लोग भी इससे लाभ उठा सकें, और आप इसे जीथब पर ले सकते हैं: https://github.com/eqcss/eqcss

कुछ तरीके हैं जो हम पृष्ठ पर एक तत्व के बारे में जान सकते हैं, उनके आधार पर विभिन्न उत्तरदायी शैलियों को लागू कर सकते हैं। यहां कुछ तत्व प्रश्न दिए गए हैं जो EQCSS प्लगइन आपको CSS में लिखने देंगे:

@element 'div' and (condition) {
  $this {
    /* Do something to the 'div' that meets the condition */
  }
  .other {
    /* Also apply this CSS to .other when 'div' meets this condition */
  }
}

तो EQCSS के साथ उत्तरदायी शैलियों के लिए किन स्थितियों का समर्थन किया जाता है?

वजन का प्रश्न

में चौड़ाई px
में चौड़ाई %
में अधिकतम-चौड़ाई px
में अधिकतम-चौड़ाई %

ऊँचाई का प्रश्न

में न्यूनतम ऊंचाई px
में न्यूनतम ऊंचाई %
में अधिकतम ऊंचाई px
में अधिकतम ऊंचाई %

गिनती गिनें

मिनट-वर्ण
अधिकतम-वर्ण
मिनट लाइनों
अधिकतम लाइनों
मिनट-बच्चों
अधिकतम-बच्चों

विशेष चयनकर्ता

ईक्यूसीएसएस तत्व प्रश्नों के अंदर आप तीन विशेष चयनकर्ताओं का भी उपयोग कर सकते हैं जो आपको विशेष रूप से अपनी शैली लागू करने की अनुमति देते हैं:

$this (तत्व) क्वेरी से मेल खाते हुए
$parent (क्वेरी से मेल खाते तत्व का मूल तत्व)
$root(दस्तावेज़ का मूल तत्व <html>)

तत्व क्वेरी आपको व्यक्तिगत रूप से उत्तरदायी डिज़ाइन मॉड्यूल से अपने लेआउट को बनाने की अनुमति देती है, प्रत्येक को पृष्ठ पर प्रदर्शित किए जाने के तरीके के बारे में 'आत्म-जागरूकता' होती है।

EQCSS के साथ आप एक विजेट को 150px चौड़े से लेकर 1000px चौड़े तक अच्छे से देखने के लिए डिज़ाइन कर सकते हैं, फिर आप किसी भी टेम्पलेट पर किसी भी पेज पर (किसी भी साइट पर) किसी भी पेज पर उस विजेट को आत्मविश्वास से गिरा सकते हैं।

— नवाचार
स्रोत

1

अच्छा प्रोजेक्ट! मैंने आपके द्वारा बनाई गई चीज़ पर एक नज़र

— डाला

@innovati मुझे यह पोस्ट तत्वों पर प्रश्न करने का तरीका ढूंढते हुए मिला। मैं इसे काम करने के लिए प्राप्त करने के लिए प्रतीत नहीं कर सकते। क्या आप मेरे टिकट को देखकर बुरा मानेंगे? github.com/eqcss/eqcss/issues/96

— एंड्रयू न्यूबी

10

लेआउट के दृष्टिकोण से, आधुनिक तकनीकों का उपयोग करना संभव है।

हेयडन पिकरिंग द्वारा इसका निर्माण (मेरा मानना है)। वह यहां की प्रक्रिया का विवरण देता है: http://www.heydonworks.com/article/the-flexbox-holy-albatross

क्रिस कॉयियर इसे उठाता है और यहां इसके डेमो के माध्यम से काम करता है: https://css-tricks.com/putting-the-flexbox-albatross-to-real-use/

समस्या को हल करने के लिए, नीचे हम एक ही घटक के 3 देखते हैं, प्रत्येक में तीन नारंगी div से बना लेबल a, bऔर है c।

दूसरे दो के ब्लॉक लंबवत प्रदर्शित होते हैं, क्योंकि वे क्षैतिज कमरे में सीमित होते हैं, जबकि शीर्ष घटक 3 ब्लॉक क्षैतिज रूप से बाहर रखे जाते हैं।

यह flex-basisप्रभाव बनाने के लिए CSS संपत्ति और CSS चर का उपयोग करता है।

.panel{
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #f00;
  $breakpoint: 600px;
  --multiplier: calc( #{$breakpoint} - 100%);
  .element{
    min-width: 33%;
    max-width: 100%;
    flex-grow: 1;
    flex-basis: calc( var(--multiplier) * 999 );
  }
}

डेमो

हेयडन का लेख 1000 शब्दों में विस्तार से बता रहा है, और मैं इसे पढ़ने की अत्यधिक सलाह दूंगा।

— Djave
स्रोत

हेयडन के लेख से वह बात ... जादू की तरह दिखता है और काम करता है! आपकी प्रतिक्रिया के लिए धन्यवाद, बहुत बढ़िया है।

— ptyskju

2

यह वह उत्तर है जो इस सवाल पर ठोकर खा रहा है

— टिहरी

7

सवाल बहुत अस्पष्ट है। जैसा कि बोल्टकॉक कहता है, मीडिया क्वेरी केवल डिवाइस के आयामों को जानता है। हालाँकि, समायोजन करने के लिए आप descender चयनकर्ताओं के साथ संयोजन में मीडिया क्वेरी का उपयोग कर सकते हैं।

.wide_container { width: 50em }

.narrow_container { width: 20em }

.my_element { border: 1px solid }

@media (max-width: 30em) {
    .wide_container .my_element {
        color: blue;
    }

    .narrow_container .my_element {
        color: red;
    }
}

@media (max-width: 50em) {
    .wide_container .my_element {
        color: orange;
    }

    .narrow_container .my_element {
        color: green;
    }
}

केवल अन्य समाधान के लिए जेएस की आवश्यकता होती है।

— cimmanon
स्रोत

47

सवाल बिल्कुल अस्पष्ट नहीं है। वास्तव में, यह एक बहुत अच्छा सवाल है। दुर्भाग्य से, इसका कोई अच्छा जवाब नहीं है।

— चरण

2

इस दृष्टिकोण का उपयोग करते हुए भयानक रखरखाव।

— Totty.js

4

एक ही तरीका है कि मैं सोच सकता हूं कि आप विशुद्ध रूप से सीएसएस के साथ जो चाहते हैं उसे पूरा कर सकते हैं, अपने विजेट के लिए एक तरल कंटेनर का उपयोग करना है। यदि आपके कंटेनर की चौड़ाई स्क्रीन का प्रतिशत है, तो आप अपने कंटेनर की चौड़ाई के आधार पर शैली के लिए मीडिया क्वेरी का उपयोग कर सकते हैं, जैसा कि अब आप प्रत्येक स्क्रीन के आयामों के लिए जान पाएंगे कि आपके कंटेनर के आयाम क्या हैं। उदाहरण के लिए, मान लें कि आप अपने कंटेनर को स्क्रीन की चौड़ाई का 50% बनाने का निर्णय लेते हैं। फिर 1200px की स्क्रीन चौड़ाई के लिए आप जानते हैं कि आपका कंटेनर 600px है

.myContainer {
  width: 50%;
}

/* you know know that your container is 600px 
 * so you style accordingly
*/
@media (max-width: 1200px) { 
  /* your css for 600px container */
}

— रूमेलिस जॉर्ज
स्रोत

नहीं, यह एक स्क्रीन पर बदसूरत दिखता है। स्क्रीन का आकार तेजी से बदलता है, लेकिन तत्व बाद में और छोटे स्क्रीन पर दिखाई देता है।

— ग्रीन

3

मैं मीडिया के प्रश्नों के बारे में भी सोच रहा था, लेकिन तब मुझे यह पता चला:

इसके लिए <div>प्रतिशत मान के साथ बस एक रैपर बनाएं padding-bottom:

div {
  width: 100%;
  padding-bottom: 75%;
  background:gold; /** <-- For the demo **/
}

<div></div>

स्निपेट का विस्तार करें

इसका परिणाम होगा <div> अपने कंटेनर की चौड़ाई (4: 3 पहलू अनुपात) के 75% के बराबर ऊंचाई के साथ ।

इस तकनीक को मीडिया के प्रश्नों और थोड़े अधिक महीन-दाने वाले नियंत्रण के लिए पेज लेआउट के बारे में थोड़े-थोड़े ज्ञान के साथ जोड़ा जा सकता है।

यह मेरी जरूरतों के लिए पर्याप्त है। जो आपकी आवश्यकताओं के लिए भी पर्याप्त हो सकता है।

— हेंडी इरावन
स्रोत

2

आप ResizeObserver का उपयोग कर सकते हैं API का । यह अभी भी शुरुआती दिनों में है, इसलिए इसे अभी तक सभी ब्राउज़रों द्वारा समर्थित नहीं किया गया है (लेकिन कई पॉलीफ़िल हैं जो आपकी सहायता कर सकते हैं)।

मूल रूप से यह API आपको किसी ईवेंट एलिमेंट को DOM एलिमेंट के आकार से जोड़ने की अनुमति देता है।

डेमो 1 - डेमो 2

— जोस सालगाडो
स्रोत

मसौदा विनिर्देश के लिए एक पॉलीफ़िल है। github.com/juggle/resize-observer

— ट्रेवर कर्जनिस

हेयडन का लेख इसका एक उदाहरण कार्यान्वयन प्रदान करता है। पृष्ठ पर "ResizeObserver" खोजें: heydonworks.com/article/the-flexbox-holy-albatross

— Gabe Rogan

0

मेरे लिए मैंने इसे div की अधिकतम चौड़ाई सेट करके किया, इसलिए छोटे विजेट प्रभावित नहीं होंगे और बड़े विजेट को अधिकतम-चौड़ाई शैली के कारण आकार दिया जाता है।

  // assuming your widget class is "widget"
  .widget {
    max-width: 100%;
    height: auto;
  }

— जैकी चू
स्रोत

प्रश्न का उल्लेख है कि विजेट का आकार भिन्न हो सकता है, अधिकतम-चौड़ाई सेट करने से कंटेनर के चौड़े होने पर विजेट का आकार नहीं बदलेगा। .widgetविजेट के div के लिए वर्ग के रूप में सिर्फ एक नमूना है।

— जैकी चू

क्या मीडिया क्वेश्चन स्क्रीन के बजाय डिव तत्व पर आधारित हो सकते हैं?

अपडेट करें

वजन का प्रश्न

ऊँचाई का प्रश्न

गिनती गिनें

विशेष चयनकर्ता