मीडिया क्वेरी: डेस्कटॉप, टैबलेट और मोबाइल को कैसे लक्षित करें?

Question

मैं मीडिया के प्रश्नों पर कुछ शोध कर रहा हूं और मुझे अभी भी समझ में नहीं आया है कि कुछ आकारों के उपकरणों को कैसे लक्षित किया जाए।

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

कुछ उदाहरण मुझे मिले हैं:

# Mobile
only screen and (min-width: 480px)

# Tablet
only screen and (min-width: 768px) 

# Desktop
only screen and (min-width: 992px)

# Huge
only screen and (min-width: 1280px) 

या:

# Phone
only screen and (max-width:320px)

# Tablet
only screen and (min-width:321px) and (max-width:768px)

# Desktop
only screen and (min-width:769px)

प्रत्येक डिवाइस के लिए ब्रेकप्वाइंट क्या होना चाहिए?

Comments

इन उपयोगी लेखों को देखें: * मोबाइल वेबसाइट कैसे बनाएं

— अहसान राठौड़

स्टैंडर्ड उपकरणों के लिए मीडिया के प्रश्नों css-tricks.com/snippets/css/media-queries-for-standard-devices

— दमयेत्रो Dzyubak

Answer 1

IMO ये सबसे अच्छा ब्रेकप्वाइंट हैं:

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

संपादित करें : 960 ग्रिड के साथ बेहतर काम करने के लिए परिष्कृत:

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

व्यवहार में, कई डिज़ाइनर पिक्सल को ईएमएस में परिवर्तित करते हैं, बड़े पैमाने पर बी / सी ईएमएस बेहतर बर्दाश्त करने वाले ज़ूमिंग के लिए। मानक ज़ूम पर 1em === 16px। 1em/16pxईएमएस प्राप्त करने के लिए पिक्सल को गुणा करें । उदाहरण के लिए, 320px === 20em।

टिप्पणी के जवाब min-widthमें, "मोबाइल-फर्स्ट" डिज़ाइन में मानक है, जिसमें आप अपनी छोटी स्क्रीन के लिए डिज़ाइन करके शुरुआत करते हैं, और फिर कभी-कभी बढ़ती मीडिया क्वेरी को जोड़ते हैं, जिससे आप बड़े और बड़े स्क्रीन पर काम करते हैं। इसके बावजूद कि आप पसंद करते हैं min-, max-या उसके संयोजन, अपने नियमों के आदेश के संज्ञान में हैं, यह ध्यान में रखते हुए कि यदि कई नियम समान तत्व से मेल खाते हैं, तो बाद के नियम पहले के नियमों को ओवरराइड करेंगे।

Comments

मैं मीडिया प्रश्नों की निचली सीमा बढ़ाने के बारे में सोच रहा हूं। तार्किक लगता है, लेकिन यह अक्सर उल्लेख नहीं देखा है। मैं भी इसे एक कदम आगे ले जाऊँगा और ems में बदलूँगा। जूमिंग और px मीडिया प्रश्नों के साथ एथन मार्कोटे के साइट व्यवहार के @jonikorpi स्क्रीनशॉट देखें। github.com/scottjehl/Respond/issues/18

— लैरी

आप अधिकतम-चौड़ाई के बजाय न्यूनतम चौड़ाई का उपयोग क्यों करेंगे? आप कैसे रोकेंगे कि min-width: 320pxसीएसएस ओवरराइड करता है min-width: 801px?

— user2019515

यह कोड मेरे मोबाइल उपकरणों पर काम नहीं करता है! क्या कोई काम करने का उदाहरण दे सकता है!

— याकूब

क्या किसी के पास "अधिकतम-चौड़ाई" इसके बराबर है?

— पाइलिनक्स

2018 - 2k और 4k वृद्धि पर हैं

— अलेक्जेंडर

Answer 2

विशिष्ट उपकरणों या आकारों को लक्षित न करें!

सामान्य ज्ञान है विशिष्ट उपकरणों या आकार को लक्ष्य न , लेकिन शब्द 'ब्रेकपाइंट' reframe करने के लिए:

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

मार्क ड्रमंड के 'ब्रेकपॉइंट्स डेड' होने के कारण आप 'नेचुरल' ब्रेकपॉइंट्स को खोजने के लिए उत्तरदायी पीडीएफ.कॉम का इस्तेमाल कर सकते हैं ।

प्राकृतिक विराम बिंदुओं का उपयोग करें

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

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

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

सिमेंटिक मार्कअप का उपयोग करें

इसके अलावा, सरल और अधिक अर्थ DOM संरचना के साथ nav, header, main, section, footerआदि (जैसे घृणित कामों से परहेज div class="header"नेस्टेड भीतरी साथ divटैग) उतना ही आसान होगा इंजीनियर जवाबदेही के लिए किया जाएगा, विशेष रूप से उपयोग करके तैरता परहेज सीएसएस ग्रिड लेआउट (सारा Drasner के ग्रिड जनरेटर एक है इसके लिए बढ़िया टूल) और आपके आरडब्ल्यूडी डिज़ाइन प्लान के अनुसार ऑर्डर करने और फिर से ऑर्डर करने के लिए फ्लेक्सबॉक्स ।

Comments

ग्राहक चाहते हैं कि उनकी साइट उनके iPad पर वैसी ही दिखे। मेरा सबसे अच्छा ब्रेकपॉइंट iPad पर मोबाइल लेआउट पर साइट स्विच करेगा। ग्राहक इसे स्वीकार नहीं करेंगे, वे चाहते हैं कि फैंसी संस्करण iPad और अन्य टैबलेट पर दिखाई दे। सामान्य ज्ञान मेरे वेतन का भुगतान नहीं कर रहा है :) मुझे व्यूपोर्ट मेटा टैग के साथ ट्रिक्स करने की आवश्यकता है। यह बहुत दर्दनाक था लेकिन मैंने इसे जावास्क्रिप्ट (हमेशा की तरह) से थोड़ी मदद से खींच लिया। PS: मैंने सेमी यूनिट का इस्तेमाल किया, पिक्सल का नहीं।

— रॉल्फ

प्राकृतिक विराम बिंदुओं के साथ, आपके पास एक मध्य-आकार का विराम बिंदु हो सकता है जिसमें लैंडस्केप मोड में iPad (और अन्य टैबलेट) शामिल हैं, या पोर्ट्रेट मोड के लिए एक और ब्रेकपॉइंट जोड़ें। मैंने कभी-कभी चार ब्रेकपॉइंट्स का उपयोग किया है, हमेशा सीएसएस और मोबाइल के साथ सभी मार्कअप शुरू करना (यह मोबाइल पर पहले से स्केल करना और फ़ोकस करना कठिन है। इसका मतलब है कि आपका डिज़ाइन और सामग्री आवश्यक है, जिसे आप आकार में वृद्धि के रूप में विस्तार कर सकते हैं) , ऊपर 400px चौड़े (या 'मोबाइल आकार से ऊपर'), फिर दो डेस्कटॉप-आकार, एक अतिरिक्त चौड़ा। फिर आप iPad पर अच्छी तरह से काम करने के लिए 'ऊपर मोबाइल' ब्रेकपॉइंट को स्टाइल कर सकते हैं।

— डेव एवरिट

यह सभी मामलों के लिए पर्याप्त नहीं है। उदाहरण के लिए, चेकबॉक्स लें। वे पीसी पर सभी वेब ब्राउज़रों के लिए ठीक हो सकते हैं, लेकिन उपयोगकर्ता को छूने के लिए एक टैबलेट पर होना चाहिए। कभी-कभी आपको उपकरणों को लक्षित करने की आवश्यकता होती है, चाहे वह सामान्य ज्ञान हो या नहीं। यह एक अच्छा लेख है: html5rocks.com/en/mobile/cross-device

— monalisa717

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

— diggersworld

@ user1411056 - अच्छा लेख। मुझे लगता है कि यह इस बात पर निर्भर करता है कि आप क्या लक्ष्य कर रहे हैं और आपकी साइट / वेबप कैसे काम करता है। मैं कहूंगा कि रिफाइनमेंट्स लगाने से पहले बेसिक रिस्पॉन्सिबल डिज़ाइन को सब कुछ अंडरपिन कर देना चाहिए। diggersworld मैं सभी ग्राहकों को शिक्षित करने के लिए हूँ - और वे आपको भुगतान क्यों कर रहे हैं? और हाँ, चेकबॉक्स उत्तरदायी हो सकते हैं; एक लेबल टैप करना बराबर है, और लेबल को स्टाइल किया जा सकता है। फिर स्पर्श उपकरणों पर मंडराना बेकार है; जिसमें बड़ी स्क्रीन हो सकती है, और 300ms की देरी हो सकती है । एक बुनियादी आरडी फाउंडेशन, जेएस द्वारा बढ़ाया गया।

— डेव एवरिट

Answer 3

अगर आप किसी डिवाइस को टारगेट करना चाहते हैं तो अभी लिखें min-device-width। उदाहरण के लिए:

IPhone के लिए

@media only screen and (min-device-width: 480px){}

गोलियों के लिए

@media only screen and (min-device-width: 768px){}

यहाँ कुछ अच्छे लेख हैं:

• Apple iPad के लिए अपनी वेबसाइट कैसे फिट करें
• CSS3 मीडिया क्वेरी

Comments

मेरे टैबलेट की चौड़ाई 2560x1600

— लीजी

ऐसा हो सकता है, लेकिन मोबाइल उपकरणों के ब्राउज़र में "डिवाइस पिक्सेल अनुपात" होता है। यह वह जगह है जहाँ यह प्रत्येक तार्किक "पिक्सेल" को आपके डिवाइस पर 2, 3 या इससे भी अधिक वास्तविक पिक्सेल के रूप में मानता है। अन्यथा एक 20px उच्च प्रेस करने के लिए बहुत छोटा और असंभव होगा - विशेष रूप से आपकी स्क्रीन पर!

— greg84

@media केवल स्क्रीन और (न्यूनतम-डिवाइस-चौड़ाई: 480px) {} मैंने इसे आज़माया - डेस्कटॉप के लिए भी मेल खाता है। लेकिन क्या होगा अगर हम केवल मोबाइल डिवाइस चाहते हैं?

— डेरियस

@ Darius.V, यह "मोबाइल फर्स्ट" मानसिकता का अनुसरण करता है, जिसका अर्थ है कि आप मोबाइल शुरू करते हैं और फिर स्क्रीन को बड़ा होने के रूप में परिवर्तन करते हैं, इसलिए आपको @media only screen and (min-device-width: 1024){}इन परिवर्तनों को ओवरराइड करने के लिए भी शामिल करना होगा: या ऐसा कुछ। वैकल्पिक रूप से, @media only screen and (MAX-device-width: 1024){}यदि आप एक डेस्कटॉप डिज़ाइन के साथ शुरुआत करते हैं, तो आप कर सकते हैं और केवल 1024 से छोटी चीज़ों में बदलाव करना चाहते हैं।

— Steely

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

— TheBlackBenzKid

Answer 4

1. मैंने इस साइट का उपयोग रिज़ॉल्यूशन खोजने और प्रति वास्तविक संख्या में सीएसएस विकसित करने के लिए किया है। उपरोक्त उत्तरों से मेरी संख्या काफी भिन्न है, सिवाय इसके कि मेरे सीएसएस वास्तव में वांछित उपकरणों को हिट करते हैं।

2. इसके अलावा, आपके मीडिया क्वेरी के बाद कोड का यह डिबगिंग टुकड़ा है जैसे:

   @media only screen and (min-width: 769px) and (max-width: 1281px) { 
     /* for 10 inches tablet screens */
     body::before {
       content: "tablet to some desktop media query (769 > 1281) fired";
       font-weight: bold;
       display: block;
       text-align: center;
       background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       z-index: 99;
     }
   } 

   इस डिबगिंग आइटम को हर एक मीडिया क्वेरी में जोड़ें और आप देखेंगे कि किस क्वेरी को लागू किया जा रहा है।

Answer 5

ट्विटर बूटस्ट्रैप द्वारा अनुशंसित सर्वोत्तम ब्रेकप्वाइंट

/* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }

Answer 6

आम डिवाइस ब्रेकप्वाइंट के लिए मीडिया क्वेरी

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

Answer 7

1. अतिरिक्त छोटे उपकरण (फोन, 480px तक)
2. छोटे उपकरण (टैबलेट, 768px और ऊपर)
3. मध्यम उपकरण (बड़े लैंडस्केप टैबलेट, लैपटॉप और डेस्कटॉप, 992px और ऊपर)
4. बड़े उपकरण (बड़े डेस्कटॉप, 1200px और ऊपर)
5. पोर्ट्रेट ई-रीडर (नुक्कड़ / किंडल), छोटी गोलियाँ - न्यूनतम चौड़ाई: 481px
6. पोर्ट्रेट टैबलेट, पोर्ट्रेट आईपैड, लैंडस्केप ई-रीडर - मिन-चौड़ाई: 641px
7. टैबलेट, लैंडस्केप iPad, लो-रेस लैपटॉप - मिनट-चौड़ाई: 961px
8. एचटीसी वन डिवाइस-चौड़ाई: 360px डिवाइस-ऊंचाई: 640px -webkit- डिवाइस-पिक्सेल-अनुपात: 3
9. सैमसंग गैलेक्सी S2 डिवाइस-चौड़ाई: 320px डिवाइस-ऊंचाई: 534px -webkit- डिवाइस-पिक्सेल-अनुपात: 1.5 (न्यूनतम - मोज-डिवाइस-पिक्सेल-अनुपात: 1.5), और -ओ-मिन-डिवाइस-पिक्सेल-अनुपात: 3/2), (न्यूनतम-डिवाइस-पिक्सेल-अनुपात: 1.5
10. सैमसंग गैलेक्सी S3 डिवाइस-चौड़ाई: 320px डिवाइस-ऊंचाई: 640px -webkit- डिवाइस-पिक्सेल-अनुपात: 2 (न्यूनतम - मोज-डिवाइस-पिक्सेल-अनुपात: 2), - पुराने फ़ायरफ़ॉक्स ब्राउज़र (फ़ायरफ़ॉक्स 16 से पहले) -
11. सैमसंग गैलेक्सी S4 डिवाइस-चौड़ाई: 320px डिवाइस-ऊँचाई: 640px -webkit- डिवाइस-पिक्सेल-अनुपात: 3
12. LG Nexus 4 डिवाइस-चौड़ाई: 384px डिवाइस-ऊँचाई: 592px -webkit-device-pixel-ratio: 2
13. असूस नेक्सस 7 डिवाइस-चौड़ाई: 601px डिवाइस-ऊँचाई: 906px -webkit-min-device-पिक्सेल-अनुपात: 1.331) और (-webkit- अधिकतम-डिवाइस-पिक्सेल-अनुपात: 1.332)
14. आईपैड 1 और 2, आईपैड मिनी डिवाइस-चौड़ाई: 768px डिवाइस-ऊंचाई: 1024px -webkit- डिवाइस-पिक्सेल-अनुपात: 1
15. iPad 3 और 4 डिवाइस-चौड़ाई: 768px डिवाइस-ऊंचाई: 1024px -webkit- डिवाइस-पिक्सेल-अनुपात: 2)
16. iPhone 3G डिवाइस-चौड़ाई: 320px डिवाइस-ऊँचाई: 480px -webkit- डिवाइस-पिक्सेल-अनुपात: 1)
17. iPhone 4 डिवाइस-चौड़ाई: 320px डिवाइस-ऊंचाई: 480px -webkit- डिवाइस-पिक्सेल-अनुपात: 2)
18. iPhone 5 डिवाइस-चौड़ाई: 320px डिवाइस-ऊंचाई: 568px -webkit- डिवाइस-पिक्सेल-अनुपात: 2)

Comments

Sansung Galaxy S3 @media केवल स्क्रीन और (डिवाइस-चौड़ाई: 720px) और (डिवाइस-ऊंचाई: 1280px) और (-webkit-min-device-पिक्सेल-अनुपात: 2) TESTED और काम किया।

— user2060451

Answer 8

यह पिक्सेल की गिनती की बात नहीं है, यह स्क्रीन पर पात्रों के वास्तविक आकार (मिमी या इंच में) की बात है, जो पिक्सेल घनत्व पर निर्भर करता है। इसलिए "न्यूनतम-चौड़ाई:" और "अधिकतम-चौड़ाई:" बेकार हैं। इस मुद्दे की एक पूरी व्याख्या यहाँ है: वास्तव में डिवाइस पिक्सेल अनुपात क्या है?

"@media" क्वेरीज़ पिक्सेल गणना और डिवाइस पिक्सेल अनुपात को ध्यान में रखती हैं, जिसके परिणामस्वरूप "वर्चुअल रिज़ॉल्यूशन" होता है, जिसे आपको अपने पेज को डिज़ाइन करते समय वास्तव में ध्यान में रखना होगा: यदि आपका फ़ॉन्ट 10px निर्धारित-चौड़ाई और " आभासी क्षैतिज संकल्प "300 px है, एक लाइन को भरने के लिए 30 वर्णों की आवश्यकता होगी।

Comments

महान। तो मीडिया के सवाल क्या होने चाहिए?

— PKHunter

Answer 9

आजकल सबसे आम बात यह है कि रेटिना-स्क्रीन डिवाइस, दूसरे शब्दों में देखें: उच्च रिज़ॉल्यूशन वाले डिवाइस और बहुत अधिक पिक्सेल घनत्व (लेकिन आमतौर पर 6 इंच से अधिक शारीरिक आकार)। इसलिए आपको अपने CSS पर रेटिना डिस्प्ले विशेष मीडिया-प्रश्नों की आवश्यकता होगी। यह सबसे पूर्ण उदाहरण है जो मुझे मिल सकता है:

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

  /* Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 

  /* Small screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 700px) {

  /* Medium screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

  /* Medium screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 1300px) {

  /* Large screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Large screen, retina, stuff to override above media query */

}

स्रोत: सीएसएस-ट्रिक्स वेबसाइट

Answer 10

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

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

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

Answer 11

एक अतिरिक्त विशेषता यह है कि आप टैग की मीडिया विशेषता में मीडिया के प्रश्नों का भी उपयोग कर सकते हैं <link>।

<link href="style.css" rel="stylesheet">
<link href="justForFrint.css" rel="stylesheet" media="print">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

इसके साथ, ब्राउज़र सभी सीएसएस संसाधनों को डाउनलोड करेगा, मीडिया विशेषता की परवाह किए बिना । अंतर यह है कि यदि मीडिया विशेषता के मीडिया-क्वेरी का मूल्यांकन गलत है तो वह .css फ़ाइल और उसकी सामग्री रेंडर-ब्लॉक नहीं की जाएगी।

इसलिए, टैग में मीडिया विशेषता का उपयोग करने की अनुशंसा की जाती है <link>क्योंकि यह एक बेहतर उपयोगकर्ता अनुभव की गारंटी देता है।

यहाँ आप इस मुद्दे के बारे में एक Google लेख पढ़ सकते हैं https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

कुछ उपकरण जो आपके मीडिया-क्वेरी के अनुसार अलग-अलग फाइलों में आपके सीएसएस कोड को अलग करने में आपकी मदद करेंगे

वेबपैक https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin

पोस्टसीएसएस https://www.npmjs.com/package/postcss-extract-media-query

Answer 12

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

मेरे मामले के लिए, 60px ऊपर और नीचे पूरी तरह से काम किया!

@media (max-width:768px) { 
  .navbar-toggle {
      margin: 60px 0;
  }
}

यहां पर नावबार की जांच करें ।

Answer 13

• अतिरिक्त छोटे उपकरण ~ फ़ोन (<768px)
• छोटे उपकरण ~ टैबलेट (> = 768px)
• मध्यम उपकरण ~ डेस्कटॉप (> = 992px)
• बड़े उपकरण ~ डेस्कटॉप (> = 1200px)

Answer 14

मैं अपना काम करने के लिए निम्नलिखित का उपयोग कर रहा हूं।

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

Answer 15

@media (max-width: 767px)   {

      .container{width:100%} *{color:green;}-Mobile

    }


    @media (min-width: 768px)  {

     .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 768px) and (orientation:portrait)  {

       .container{width:100%} *{color:yellow  } -Mobile

    }
    @media (min-width: 1024px)  {

       .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 1200px)  {

    .container{width:1180px} *{color:pink   } -Desktop

    }