اواجه مشكله في تحديد font-size لأجهزة الموبايل و التابلت والشاشه الصغيره
لست ادري ما هي المقاسات المناسبه لكل شاشه
استخدم عادة font-size:17 px علي شاشة laptop
اعتقد ان العمل علي الشاشات الصغيره بنفس الحجم هيكون سـئ
اقوم باستخدام الخط droid arabic naskh
هل من مقترحـات ؟
بالنسبة للفقرات
استخدم حجم الخط 16 للشاشات الكبيرة و 14 فى الشاشات الصغيرة
بالنسبة للعناوين
استخدم 24 ل h1 و 22 ل h2 و 18 ل h3 فى الشاشات الكبيرة و فى الشاشات الصغيرة استخدم 20 , 18 , 16 ... على التوالى
مع line-heigh بقيمة 26 مع الشاشات الكبيرة و 24 للشاشات الصغيرة
انا اقوم باستخدام componentsالمتاحه بالفعل في bootstrap وايضا اتعامل مع media Query
لكن مش فاهم ازاي bootstrap يقدر يساعدني في حاجه زي كـده ؟
اخي انا استفسر عن الخط المناسب لكل شاشه ؟
دي اول تجربه لي مع responsive websites
عاوز اعرف حجم الخط المتوقع في شاشة الموبايل مثلا ؟
لا اريد ان اضع 17px ويكون حجم الخط كبير وهذ كافي ان يطفش المستخدم
متصفح فيرفوكس يوفر لك فتح الصفحة وكأنها من جوال , لم لا تجرب بنفسك وتعرف ما الخط المناسب لك
افتح الصفحة ثم اضغط right click بالفأرة
اختر Inspect element
فوق النافذة التي تظهر بها خصائص ال css لكل عنصر يوجد مربع على يسار ايقونة المسنن
شكله مربع صغير وبداخله مربع اصغر منقط
اضغط عليه وستتحول الى شاشة موبايل , يمكنك التحكم بعرضه وطوله كما تشاء
إستخدم هذا الكود في ال head
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
هذا الكود يغير الأبعاد الحقيقية لشاشات الهواتف الذكية حتى تظهر الأحرف في الهاتف كما تظهر في الحاسوب
الهواتف الذكية الآن أصبحت عدد البكسلات فيها مساوية ( أو قد تفوق ) لعدد البكسلات في شاشة الحاسوب
لاكن عرض البكسل الواحد في شاشة الحاسوب أكبر من عرض البكسل في شاشة الهاتف الذكي
هذا هو سبب صغر الخط على الهاتف
ولتصحيح هذا الأمر الكود يكبر عرض البكسلات في الهاتف إلى نفس عرضها في الحاسوب
وأتفق معك في أن حجم الخط بوحدة البكسل لا يتغير
ولاكن يتغير حجم الخط بوحدة الملمتر مثلا.
أنت بحاجة لاستخدام وحدة قياس em للخط. شاهد التفاصيل [1].
[1] The Power of em Units in CSS
التعليقات