قسم CSS
أولاً ، قم بإنشاء فئة جديدة للحكم ، ثم استخدم استعلامات الوسائط لتعيين قيم مختلفة إلى سمة Z-Index لهذه الفئة. يتم استخدام هذه الفئة فقط كقراءة JavaScript ، لذلك يجب نقلها من نافذة الشاشة بحيث يكون المشاهد غير مرئي لتجنب المواقف غير المتوقعة.
كتقديم عرض ، يقوم الرمز التالي بتعيين أربع حالات للجهاز: الإصدار العادي لسطح المكتب ، وإصدار سطح مكتب الشاشة الصغيرة ، وإصدار الجهاز اللوحي ، وإصدار الهاتف المحمول.
/ * الحالة الافتراضية */. Indicator State {position: Absolute ؛ أعلى: -999EM ؛ اليسار: -999em ؛ z-index: 1 ؛}/ * Small Desktop */@Media all و (Max-Width: 1200px) {.state-indicator {z-index: 2 ؛ }}/ * tablet */@media all و (max-width: 1024px) {.state-indicator {z-index: 3 ؛ }}/ * الهاتف المحمول */@media all و (max-width: 768px) {.state-indicator {z-index: 4 ؛ }}حكم جافا سكريبت
CSS موجودة بالفعل ، لذلك تحتاج إلى استخدام JavaScript لإنشاء كائن DOM مؤقت ، ثم قم بتعيين الفئة المقابلة لها ، ثم قراءة قيمة z-index لهذا الكائن. طريقة الكتابة الأصلية هي كما يلي:
// إنشاء مؤشر ElementVar indisticator state- 10) ؛} getDevicestate () تُرجع الوظيفة قيمة z-ondex. من أجل تعزيز قابلية القراءة ، يمكنك استخدام وظائف التبديل لتوحيد الإخراج: الوظيفة getDevicEstate () {switch (parseint (window.getComputedStyle (مؤشر) .getPropertyValue ('z-index') ، 10)) {case 2: return 'small-desktop' ؛ استراحة؛ الحالة 3: إرجاع "الجهاز اللوحي" ؛ استراحة؛ الحالة 4: إرجاع "الهاتف" ؛ استراحة؛ الافتراضي: إرجاع "سطح المكتب" ؛ استراحة؛ }}وبهذه الطريقة ، يمكنك استخدام الكود التالي لتحديد حالة الجهاز ثم تنفيذ رمز JavaScript المقابل:
if (getDevicEstate () == 'tablet') {// javaScript تم تنفيذها تحت الجهاز اللوحي}إذا كنت تستخدم jQuery هنا ، فما عليك سوى استخدام الكود التالي:
$ (function () {$ ('body'). إلحاق ('<viv> </viv>) ؛ وظيفة getDevicEstate () {switch (parseint ($ ('. "سطح المكتب" ؛أنشئ أولاً ، ثم الحصول على هذه العقدة ، ثم احذفها أخيرًا. سيتم إخراج الجهاز المحدد في وحدة التحكم الخاصة بك. انقر هنا لعرض العرض التوضيحي. يمكنك محاولة سحب الحدود الوسطى والنقر فوق "تشغيل".