بكسليو - قياسات شاشات معيارية لعمل تصميم متجاوب
درس رائع (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
التعليقات