يبحث مطورو الويب دائما عن طرق فعالة للتحكم في حجم الخط على صفحات الويب. واحدة من الأساليب الأكثر مرونة وقابلة للتطوير هو استخدام حجم الخط النسبي من إم.
م هي وحدة قياس تعتمد على حجم الخط الحالي للعنصر الأصل. عند تعيين قيمة حجم الخط في إم ، سيتم توريثها تلقائيا بواسطة العناصر الفرعية ، مما يجعل من السهل التحكم في حجم النص على الصفحة بأكملها.
باستخدام م كما يسمح لك لخلق تخطيطات المطاط التي تتكيف بسهولة مع دقة الشاشة المختلفة. يمكنك تعيين حجم خط أساسي للموقع بأكمله ، ثم قياسه باستخدام م بحيث يكون النص قابلا للقراءة على أي جهاز.
على سبيل المثال ، إذا كان لديك رأس ح1 بحجم خط 2 م ، وقمت بتعيين حجم الخط الأساسي على 16 بكسل (بكسل) ، فسيتم عرض الرأس بحجم خط 32 بكسل (2*16).
- لماذا أحتاج إلى استخدام حجم الخط إم?
- كيفية استخدام حجم الخط إم بشكل صحيح في المغلق?
- مزايا استخدام حجم الخط م
- كيف يمكنني تحديد حجم الخط م?
- أمثلة على استخدام حجم الخط إم في هتمل و كس
- نصائح لاستخدام حجم الخط م
- استنتاجات حول استخدام حجم الخط م
لماذا أحتاج إلى استخدام حجم الخط إم?
والميزة الرئيسية لاستخدام حجم الخط إم هو أنه يرث تلقائيا أحجام الخطوط من العنصر الأصل ، وضمان الاتساق والاتساق من الخطوط على الموقع. يتيح لك ذلك إنشاء عرض ثابت وموحد للنص في المتصفحات والأجهزة المختلفة.
ميزة أخرى لاستخدام حجم الخط م هو القدرة على تغيير حجم النص بسهولة ومرونة لأنواع مختلفة من الشاشات والقرارات. هذا مهم بشكل خاص في التصميم سريع الاستجابة ، حيث يجب أن تتكيف الخطوط تلقائيا مع أحجام الشاشات المختلفة ، بدءا من شاشات سطح المكتب الكبيرة إلى الهواتف المحمولة.
| حجم الخط: 1.2 م; |
}
باستخدام حجم خط إم ، يمكنك بسهولة إنشاء تصميم مرن وسريع الاستجابة يتسع بسهولة ويتكيف مع الشاشات والأجهزة المختلفة. يتيح ذلك للمستخدمين عرض المحتوى بشكل مريح على أي جهاز ، مع الحفاظ على سهولة قراءة وجمال صفحة الويب.
عندما يتم تطوير تطبيق أو موقع ويب ، يمكنك استخدام قيمة م للتحكم في حجم الخط مريحة ومرنة. تتمثل ميزة استخدام وحدة القياس هذه في القدرة على ضبط حجم الخط تلقائيا إذا قام المستخدم بتغيير إعدادات التكبير / التصغير لصفحة الويب.
لاستخدام قيمة م ، يجب تحديد حجم الخط المطلوب بالنسبة لحجم العنصر الأصلي. على سبيل المثال ، إذا كان لديك عنصر أصل بحجم خط 14 بكسل (بكسل) ، وتريد تعيين حجم الخط للعنصر الفرعي إلى 1.5 مرة أكبر ، يمكنك تطبيق الخاصية
حجم الخط
}
في هذا المثال ، سيكون حجم خط العنصر الفرعي 1.5 * 14 = 21 بكسل. إذا قمت بتغيير حجم خط العنصر الأصل ، فسيتم أيضا تغيير حجم خط العنصر الفرعي بناء على القيمة النسبية لـ م.
بالإضافة إلى ذلك ، يمكنك أيضا استخدام م لإنشاء تسلسلات هرمية أكثر تعقيدا لأحجام الخطوط. على سبيل المثال ، إذا كانت لديك قائمة بالرؤوس بمستويات مختلفة ، فيمكنك تعيين حجم كل رأس بالنسبة إلى المستوى السابق:
ح1 {
حجم الخط: 2 م;
}
ح2 {
حجم الخط: 1.5 م;
}
ح3 {
حجم الخط: 1.2 م;
}
في هذا المثال ، حجم الخطإي إس إتش 1
سيكون ضعف حجم خط النص الرئيسي,
باستخدام وحدة م القياس يجعل من السهل لإدارة أحجام الخطوط وخلق تصميم مرن وسريع الاستجابة للتطبيقات والمواقع.1. المرونة وقابلية التوسع
باستخدام م حجم الخط يسمح لك لخلق تصميم صفحة ويب مرنة وقابلة للتطوير. عند تغيير حجم خط العنصر الأصل ، سيتم أيضا تغيير حجم النص داخل هذا العنصر تلقائيا.
3. دعم التصميم التكيفييعد حجم خط إم مثاليا لإنشاء تصميمات سريعة الاستجابة يجب أن تبدو جيدة على أجهزة وشاشات مختلفة الأحجام. باستخدام م حجم الخط يسمح لك لخلق صفحات الويب استجابة التي مقياس تلقائيا للعرض الأمثل على أي جهاز.
4. دعم أفضل لمحركات البحث
يساهم استخدام حجم خط إم في فهرسة وعرض صفحة الويب بشكل أفضل بواسطة محركات البحث. تعتبر محركات البحث حجم الخط م كقيمة نسبية وتكييفه بشكل أفضل عند عرضه على أجهزة مختلفة وفي ظروف عرض مختلفة.
وضع كل ذلك معا ، وذلك باستخدام حجم الخط م يوفر المرونة وسهولة الوصول إليها ، ودعم تصميم استجابة ، ودعم أفضل لمحركات البحث. مع الاستخدام السليم لحجم الخط م ، يمكنك إنشاء صفحات ويب سهلة الاستخدام ، استجابة ومحسنة محرك البحث.
كيف يمكنني تحديد حجم الخط م?
واحد م يتوافق مع حجم الخط من العنصر الأصل. على سبيل المثال ، إذا كان حجم الخط الأساسي للعنصر الأصلي هو 16 بكسل ، فسيكون 1 م 16 بكسل.
أمثلة على استخدام حجم الخط إم في هتمل و كس
باستخدام حجم الخط إم في هتمل و كس ، يمكنك بسهولة إنشاء مواقع استجابة وقابلة للتطوير. يحدد حجم الخط م حجم الخط النسبي بالنسبة لحجم الخط للعنصر الأصل.
مثال 1:
هذا هو نص المحتوى بحجم خط 1.5 إم.
في هذا المثال ، يتم تعيين حجم الخط في العنصر إلى 2 م (2 مرات أكبر من حجم الخط الافتراضي) ، وفي العنصر
مع فئة" المحتوى " — 1.5 م (1.5 مرة أكبر من حجم الخط الافتراضي).
المثال 2:
يبلغ حجم خط هذا النص 0.8 م.
هذا النص له حجم خط 1 م.