दिलचस्प पोस्ट
जावा में संकुल कैसे संकलित करें? TextView की लाइनों की संख्या कैसे प्राप्त करें? जावा में लूप के लिए अगले इनपुट लेने से पहले 3 बार चला जाता है यह सीएसएस मार्जिन टॉप स्टाइल काम क्यों नहीं करता है? कैसे संपर्क डेटाबेस में परिवर्तन के लिए सुनने के लिए java.lang.VerifyError: एक स्टैकमैप फ़्रेम की अपेक्षा करें NgStyle (angular2) का उपयोग करके पृष्ठभूमि-छवि कैसे जोड़ें? मैं एक आयात लाइब्रेरी (.lib) और दृश्य सी ++ में एक DLL कैसे बना सकता हूं? एंड्रॉयड getIntent ()। GetExtras () रिक्त रिटर्न क्यों कोणीय नियंत्रक घोषणा इस वाक्य रचना संरचना है? एक HTTP POST कितना सुरक्षित है? आईडी का अर्थ क्या है? IP पते से देशांतर और अक्षांश मान मैं एक गिट धक्का कैसे ठीक से बाध्य कर सकता हूं? संकलित समय में Constexpr का उपयोग कर एक आरे को आबाद करें

स्क्रीन आकार के लिए सीएसएस मीडिया क्वेरी

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

स्क्रीन आकार:

  1. 640×480
  2. 800×600
  3. 1024×768
  4. 1280×1024 (और बड़ा)

जिस चीज के साथ मुझे परेशानी हो रही है, वह सीएसएस 3 मीडिया प्रश्नों का निर्माण कर रहा है, ताकि विंडो की चौड़ाई इन चौड़ाई में से एक के लिए मेरे लेआउट में बदल जाए। नीचे मीडिया क्वेरीज़ का एक उदाहरण है जो मैं वर्तमान में उपयोग कर रहा हूं, लेकिन यह मेरे लिए काम नहीं कर रहा है, इसलिए मैं सोच रहा हूं कि कोई मुझे इसे ठीक करने में सहायता कर सकता है।

<link rel="stylesheet" type="text/css" media="screen and (max-width: 700px)" href="css/devices/screen/layout-modify1.css"> <link rel="stylesheet" type="text/css" media="screen and (min-width: 701px) and (max-width: 900px)" href="css/devices/screen/layout-modify2.css"> <link rel="stylesheet" type="text/css" media="screen and (max-width: 901px)" href="css/devices/screen/layout-modify3.css"> 

मैंने मीडिया के एक नए सेट के साथ जाने की कोशिश की, लेकिन वे अभी भी मेरे लिए काम नहीं कर रहे हैं क्या कोई कृपया मुझे समझाने में मदद करता है कि मैं क्या गलत हूँ आप में से कई ने पहले ही समझाया है, लेकिन मुझे यह नहीं मिल रहा है नई मीडिया क्वेरी नीचे प्रदर्शित की गई हैं:

 <link rel="stylesheet" type="text/css" media="screen and (max-width: 640px)" href="css/devices/screen/layout-modify1.css"> <link rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" href="css/devices/screen/layout-modify2.css"> <link rel="stylesheet" type="text/css" media="screen and (max-width: 1024px)" href="css/devices/screen/layout-modify3.css"> <link rel="stylesheet" type="text/css" media="screen and (max-width: 1280px)" href="css/devices/screen/layout-modify4.css"> 

Solutions Collecting From Web of "स्क्रीन आकार के लिए सीएसएस मीडिया क्वेरी"

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

 #1 (max-width: 700px) #2 (min-width: 701px) and (max-width: 900px) #3 (max-width: 901px) 

तीसरी मीडिया क्वेरी शायद min-width: 901px अभी, यह # 1 और # 2 को ओवरलैप करता है, और स्क्रीन केवल 901px चौड़ा होने पर पृष्ठ लेआउट को नियंत्रित करता है।

अपडेट किए गए प्रश्न के लिए संपादित करें:

 (max-width: 640px) (max-width: 800px) (max-width: 1024px) (max-width: 1280px) 

मीडिया प्रश्नों को पकड़ने या अगर / अन्य बयानों की तरह नहीं हैं यदि किसी भी स्थिति से मेल खाती है, तो यह प्रत्येक मीडिया क्वेरी से मिलान की सभी शैलियों को लागू करेगा यदि आप केवल अपने सभी मीडिया प्रश्नों के लिए एक min-width निर्दिष्ट करते हैं, तो संभव है कि कुछ या सभी मीडिया क्वेरी मेल खाए जाएं। आपके मामले में, एक डिवाइस जो 640 पीएक्स विस्तृत रूप से आपके सभी 4 मीडिया प्रश्नों से मेल खाता है, इसलिए सभी स्टाइल शीट के लिए लोड किए जाते हैं। आप सबसे अधिक संभावना क्या तलाश रहे हैं यह है:

 (max-width: 640px) (min-width: 641px) and (max-width: 800px) (min-width: 801px) and (max-width: 1024px) (min-width: 1025px) 

अब कोई ओवरलैप नहीं है। शैलियों केवल तभी लागू होती हैं यदि डिवाइस की चौड़ाई निर्दिष्ट की गई चौड़ाई के बीच होती है

इसे एक दस्तावेज़ में रखें और इसका उपयोग करें:

 /* 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 */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 - 5s ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } /* iPhone 6 ----------- */ @media only screen and (max-device-width: 667px) only screen and (-webkit-device-pixel-ratio: 2) { /* Styles */ } /* iPhone 6+ ----------- */ @media only screen and (min-device-width : 414px) only screen and (-webkit-device-pixel-ratio: 3) { /*** You've spent way too much on a phone ***/ } /* Samsung Galaxy S7 Edge ----------- */ @media only screen and (-webkit-min-device-pixel-ratio: 3) and (min-resolution: 192dpi)and max-width:640px) { background-image: url('http://img.hiwab.com/html/maxresdefault.jpg'); } 

स्रोत: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

इस बिंदु पर, मैं निश्चित रूप से पिक्सल के बजाय उनके मूल्यों का उपयोग करने पर विचार करेगा। अधिक जानकारी के लिए, इस पोस्ट की जांच करें: https://zellwk.com/blog/media-query-units/

सभी स्मार्टफ़ोन और बड़ी स्क्रीन के लिए मीडिया क्वेरी के इस प्रारूप का उपयोग करें

 /* 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 */ }