Sass MediaScreen - सीएसएस उपकरणों को परिभाषित करना

मेरा मानना ​​है कि हाल ही में उपकरणों के विभिन्न समूहों के बीच स्क्रीन आकार में अंतर अधिक धुंधला हो रहा है। इसके बावजूद, मैंने उपकरणों के दोनों समूहों (मोबाइल फोन, टैबलेट, लैपटॉप, डेस्कटॉप) और विशिष्ट उपकरणों (iPhone 5, iPhone X, iPad Pro 12, आदि) को निर्धारित करने के लिए एक उपकरण लिखने की कोशिश की। यह निकला, मेरी राय में, SASS मिश्रण का एक सुविधाजनक पैक है। और महत्वपूर्ण रूप से, उपकरण का उपयोग करना आसान है, और आप स्रोत को संपादित किए बिना अपने स्वयं के उपकरणों की सूची का विस्तार करने की अनुमति भी देते हैं।


वैसे, डेमो यहां पोक करें ।

आरक्षण के कुछ जोड़े:

• DevTools ब्राउज़र में अनुकूलन क्षमता की जांच न करें, डिवाइस के लैंडस्केप ओरिएंटेशन में पक्षों के आकार की वहां सही तरीके से गणना नहीं की जाती है । वास्तविक डिवाइस पर या सिम्युलेटर में जांच करना बेहतर है (उदाहरण के लिए, एक्सकोड सिम्युलेटर)।
• समान मीडिया प्रश्नों को संयोजित करने के लिए समूह-सीएसएस-मीडिया-प्रश्नों का उपयोग करें। इसके बिना, @media ... कोड को दोहराने का एक बहुत कुछ उत्पन्न होता है @media ... यदि सुविधा के लिए हम प्रत्येक चयनकर्ता में @include device() अलग से उपयोग करते हैं। गल्प आवरण - gulp-group-css-media-questions ।

स्थापना

पुस्तकालय डाउनलोड करें:

 $ yarn add sass-mediascreen  $ npm install sass-mediascreen  $ curl -O https://raw.githubusercontent.com/gvozdb/sass-mediascreen/master/_mediascreen.scss 

और मिक्सिंस को हमारे एप्लिकेशन से कनेक्ट करें:

 @import "mediascreen"; 

उदाहरण

यह है कि आप विशिष्ट उपकरणों का परीक्षण कैसे कर सकते हैं:

 @include device(iPhone5, portrait) { // portrait orientation // iPhone 5, iPhone 5s, iPhone 5c, iPhone SE } @include device(iPhone6Plus iPhoneXR, landscape) { // landscape orientation // iPhone 6+, iPhone 6s+, iPhone 7+, iPhone 8+, iPhone XR } @include device(iPadPro10 iPadPro11 iPadPro12) { // all orientations // iPad Pro 10.5, iPad Pro 11, iPad Pro 12.9 } 

यहाँ उपकरण समूह हैं:

 @include device(desktop) { // all orientations // desktop } @include device(mobile tablet laptop, landscape) { // landscape orientation // mobile, tablet, laptop } @include device(mobile-landscape tablet laptop) { // landscape orientation // mobile // all orientations // tablet, laptop } @include device(mobile-landscape tablet laptop, portrait) { // landscape orientation // mobile // portrait orientation // tablet, laptop } 

और ये स्क्रीन आकार (से,) और डिवाइस की वर्तमान अभिविन्यास की जाँच के लिए मानक मिश्रण हैं:

 @include screen(min-width, max-width, orientation) {/*...*/} @include min-screen(width) {/*...*/} @include max-screen(width) {/*...*/} @include screen-height(min-height, max-height, orientation) {/*...*/} @include min-screen-height(height) {/*...*/} @include max-screen-height(height) {/*...*/} @include landscape() {/*...*/} @include portrait() {/*...*/} 

समर्थित उपकरणों की सूची

समूहों

- मोबाइल्स 320-767px - mobile , mobile-portrait , mobile-landscape
- टैबलेट 768-1023px - tablet , tablet-portrait , tablet-landscape
- लैपटॉप 1024-1199px - laptop , laptop-portrait , laptop-landscape
- डेस्कटॉप> = 1200px - desktop , desktop-portrait , desktop-landscape

टेलीफोन

- iPhone 5, 5s, 5c, SE - iphone5 , iphone5s , iphone5c , iphonese
- iPhone 6, 6s, 7, 8 - iphone6 , iphone6s , iphone7 , iphone8
- iPhone 6+, 6s +, 7+, 8+ - iphone6plus , iphone6splus , iphone7plus , iphone8plus
- iPhone X, XS - iphonex , iphonexs
- iPhone XR - iphonexr
- iPhone XS मैक्स - iphonexsmax

गोलियाँ

- आईपैड 1, 2, मिनी, एयर - ipad1 , ipad2 , ipadmini , ipadair
- iPad 3, 4, प्रो 9.7 "- ipad4 , ipadpro9 , ipadpro9
- आईपैड प्रो 10.5 "- ipadpro10
- आईपैड प्रो 11.0 "- ipadpro11

लैपटॉप

- आईपैड प्रो 12.9 "- ipadpro12

काश, स्क्रीन आकार के मामले में, iPad Pro 12 एक लैपटॉप है!

उपकरणों की सूची का विस्तार

जैसा कि मैंने पहले कहा था, आप पुस्तकालय स्रोत को संपादित किए बिना कस्टम डिवाइस या डिवाइस समूहों के लिए समर्थन जोड़ सकते हैं। ऐसा करने के लिए, @import "mediascreen" आयात करने से पहले, आपको अपने उपकरणों की सूची के साथ $ms-devices Sass वेरिएबल घोषित करने की आवश्यकता है:

 $ms-devices: ( desktop-sm: ( group: true, //   -   min: 1200px, max: 1919px, ), desktop-md: ( group: true, min: 1920px, max: 2879px, ), desktop-lg: ( group: true, min: 2880px, ), pixel2xl: ( group: false, //   -   width: 411px, // or 412px?.. height: 823px, pixel-ratio: 3.5, ), macbook12: ( group: false, orientation: landscape, width: 1440px, height: 900px, pixel-ratio: 2, ), imac27: ( group: false, orientation: landscape, width: 5120px, height: 2880px, ), ); @import "mediascreen"; 

उसके बाद, आप अपने उपकरणों के साथ-साथ मानक पुस्तकालय उपकरणों की जांच कर सकते हैं:

 @include device(desktop-sm) { // desktop-sm } @include device(desktop-md) { // desktop-md } @include device(desktop-lg) { // desktop-lg } @include device(Pixel2XL, landscape) { // landscape orientation // Google Pixel 2XL } @include device(MacBook12) { // landscape orientation // MacBook 12 } @include device(iMac27) { // landscape orientation // iMac 27 } 

संदर्भ

पुस्तकालय जीथुब पर
एनपीएम रिपोजिटरी में लाइब्रेरी
डेमो पेज