كيفية تغيير حجم الخط في هتمل اعتمادا على حجم الشاشة

غالبا ما يتعين على مصممي ومطوري الويب التعامل مع مهمة التصميم التكيفي ، أي إنشاء مواقع ويب تبدو جيدة على الأجهزة والشاشات المختلفة. أحد الجوانب الرئيسية للتصميم سريع الاستجابة هو تغيير حجم الخط اعتمادا على حجم شاشة جهاز المستخدم.

يمكن استخدام طرق مختلفة لتغيير حجم الخط في هتمل. واحد منهم هو استخدام وحدات القياس النسبية ، مثل النسب المئوية أو م.

عند استخدام النسب المئوية لتحديد حجم الخط ، سيتم قياسه تلقائيا بناء على حجم العنصر الأصل. على سبيل المثال ، إذا قمت بتعيين الخط داخل العلامة القوية على 150 ٪ ، فسيكون أكبر بمقدار 1.5 مرة من العنصر الأصل.

باستخدام الوحدات النسبية في كس يسمح لك لخلق تصميم مرن والتكيف ، لأن حجم العناصر سوف تتكيف مع حجم شاشة المستخدم.

إذا كنت ترغب في ضبط حجم الخط اعتمادا على حجم الشاشة ، يمكنك استخدام م. في هذه الحالة ، يتم تحديد وحدة القياس إم فيما يتعلق بحجم خط العنصر الأصل. على سبيل المثال ، إذا قمت بتعيين الخط داخل علامة م إلى 1.2 م ، وسوف يكون 1.2 مرات أكبر من العنصر الأصل.

من المهم أن تتذكر أنه عند استخدام وحدات القياس النسبية ، يجب عليك تعيين قيم حجم الخط الأساسية الصحيحة لضمان سهولة القراءة على جميع الأجهزة.

1. طرق لتغيير حجم الخط
2. استفسارات وسائل الإعلام
3. استخدام وحدات القياس النسبية

طرق لتغيير حجم الخط

هناك عدة طرق لتغيير حجم الخط في هتمل اعتمادا على حجم الشاشة:

1. استخدام وحدات القياس النسبية: بدلا من استخدام القيم الثابتة مثل وحدات البكسل أو النقاط ، يمكن استخدام وحدات القياس النسبية مثل النسبة المئوية أو إم. على سبيل المثال ، يمكنك تعيين حجم الخط كنسبة مئوية من حجم الخط الافتراضي أو فيما يتعلق بحجم الخط الحالي.

2. استعلامات الوسائط: باستخدام استعلامات الوسائط ، يمكنك تعيين أحجام خطوط مختلفة لأحجام أو أجهزة شاشة مختلفة. على سبيل المثال ، يمكنك تحديد أنه إذا كان عرض الشاشة أقل من 600 بكسل ، فسيتم استخدام حجم خط واحد ، وإذا كان عرض الشاشة أكثر من 600 بكسل ، فسيتم استخدام حجم خط آخر.

3. جافا سكريبت: باستخدام جافا سكريبت ، يمكنك تغيير حجم الخط ديناميكيا حسب حجم الشاشة أو المعلمات الأخرى. يمكن أن يكون هذا مفيدا إذا كنت بحاجة إلى منطق أكثر تعقيدا لتغيير حجم الخط.

4. أطر كس: بعض أطر كس ، مثل بوتستراب ، تقدم فئات مدمجة لتغيير حجم الخط اعتمادا على حجم الشاشة. يمكن أن يكون هذا مناسبا إذا تم العمل بإطار عمل موجود.

بناء على مهامك ومتطلباتك ، يمكنك اختيار إحدى هذه الطرق أو مجموعة منها لتغيير حجم الخط في شفرة هتمل.

استفسارات وسائل الإعلام

تعتمد استعلامات الوسائط على استخدام الشروط التي تحدد وقت تطبيق مجموعة معينة من الأنماط. المثال الأكثر شيوعا للشرط هو عرض الشاشة ، والذي يتم قياسه بالبكسل (بكسل).

لاستخدام استعلامات الوسائط ، تحتاج إلى تحديد الشرط داخل كتلة الوسائط@. على سبيل المثال ، إذا أردنا تغيير حجم النص عندما يصبح عرض الشاشة أقل من 600 بكسل ، فيمكننا استخدام الكود التالي:

ثم سيتم زيادة حجم النص بنسبة 50 ٪ من حجم الخط الافتراضي.