درس رائع (y)

لدي بعض الاسئلة

1 - الاعتماد على تلك القياسات ليس بالامر العملي و انت اشرت له :)

2 - ما الفرق بين max-device-width و max-width.

3 - بالنسبة ل Retina هل دعم و عدم الدعم عن طريق -webkit-min-device-pixel-ratio: 2 ؟

اذا كان صحيح ماذا لو كنت استخدم متصفح اخر غير الكروم ؟

بخصوص سؤال الاول هل يمكن الاعتماد على جافاسكربت كبديل يعني media queries و جافاسكربت مثلا تقوم بجلب العرض و تضع العرض المناسب للعنصر المستهدف :)

شكرا لك :)

ما الفرق بين max-device-width و max-width.

الفرق هو أن max-device-width ستطبق التنصيق فقط على شاشات أجهزة المحمولة كهواتف وحواسيب اللوحية بعكس max-width التي ستطبق التنصيق على أجهزة سطح المكتب والأجهزة المحمولة معاً

بالنسبة ل Retina هل دعم و عدم الدعم عن طريق -webkit-min-device-pixel-ratio: 2 ؟

نعم عبر -webkit-min-device-pixel-ratio: 2 مع min-resolution: 192dpi وهذا الكود سيعمل على متصفحات التي تعمل على محرك webkit مثل Chrome و Safari

هذا ممكن ويمكن إستخدام هذه الطريقة في حالة عمل تطبيق لكود جافاسكريبت عند عرض معين للشاشة هكذا

@media all and (max-width: 900px) {
// styles
}

if (document.documentElement.clientWidth < 900) {
// scripts
}

لكن من أفضل عمل تنصيقات المتجاوبة ب Media Queries


تطوير الويب

مجتمع خاص بمناقشة وطرح المواضيع والقضايا العامة المتعلقة بتطوير الويب ولغاتها المختلفة

20.7 ألف متابع