أعتقد أنه في الآونة الأخيرة أصبح الفرق في حجم الشاشة بين مجموعات الأجهزة المختلفة أكثر وضوحًا. على الرغم من ذلك ، حاولت كتابة أداة لتحديد مجموعتي الأجهزة (الهواتف المحمولة والأجهزة اللوحية وأجهزة الكمبيوتر المحمولة وأجهزة سطح المكتب) وأجهزة معينة (iPhone 5 و iPhone X و iPad Pro 12 وما إلى ذلك). اتضح ، في رأيي ، حزمة مريحة من مزيج SASS. والأهم من ذلك ، أن الأداة سهلة الاستخدام ، كما تسمح لك بتوسيع قائمة الأجهزة الخاصة بك دون تحرير المصدر.
بالمناسبة ،
كزة التجريبي هنا .
فقط بضع تحفظات:
تركيب
قم بتنزيل المكتبة:
$ 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-767 بكسل -
mobile ،
mobile-portrait mobile-landscape- الأجهزة اللوحية 768-1023px -
tablet ،
tablet-portrait tablet-landscape- أجهزة الكمبيوتر المحمولة 1024-1199px -
laptop ،
laptop-portrait laptop-landscape ،
laptop-landscape- أجهزة سطح المكتب> = 1200 بكسل -
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 Max -
iphonexsmaxأقراص- iPad 1 ، 2 ، Mini ، Air -
ipad1 ،
ipad2 ،
ipadmini ،
ipadair- iPad 3 ، 4 ، Pro 9.7 "-
ipad4 ،
ipadpro9 ،
ipadpro9- iPad Pro 10.5 "-
ipadpro10- iPad Pro 11.0 "-
ipadpro11أجهزة الكمبيوتر المحمولة- iPad Pro 12.9 "-
ipadpro12للأسف ، من حيث حجم الشاشة ، فإن جهاز iPad Pro 12 هو كمبيوتر محمول!تمديد قائمة الأجهزة
كما قلت سابقًا ، يمكنك إضافة دعم للأجهزة المخصصة أو مجموعات الأجهزة دون تحرير مصدر المكتبة. للقيام بذلك ، قبل استيراد
@import "mediascreen" استيراد
@import "mediascreen" ، تحتاج إلى إعلان متغير Sass
$ms-devices باستخدام قائمة من أجهزتك:
$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 }
مراجع
مكتبة على جيثبمكتبة في مستودع Npmالصفحة التجريبية