يمكن أن يكون تغيير حجم خط صفحة الويب عاملا مهما لضمان سهولة قراءة المحتوى على الأجهزة وأحجام الشاشة المختلفة. إذا كان حجم الخط كبيرا جدا ، فقد لا يتناسب النص مع الشاشة ويتطلب التمرير الأفقي ، مما يؤدي إلى إزعاج المستخدمين. إذا كان حجم الخط صغيرا جدا ، فسيكون من الصعب قراءة النص ، خاصة على الأجهزة ذات دقة الشاشة المنخفضة.
باستخدام كس واستخدام استعلامات الوسائط ، يمكنك تغيير حجم الخط ديناميكيا اعتمادا على حجم النافذة ودقة شاشة المستخدم. للقيام بذلك ، يمكنك استخدام وحدات القياس النسبية ، مثل النسب المئوية أو م. تسمح لك النسب المئوية بتعيين حجم الخط بالنسبة إلى حجم الخط الأساسي المحدد في نمط الصفحة العامة. على سبيل المثال ، إذا تم تعيين حجم الخط الأساسي على 16 بكسل ، فإن 100 ٪ سيتوافق مع 16 بكسل ، و 200 ٪ إلى 32 بكسل ، وما إلى ذلك.
إذا كنت ترغب في تعيين حجم الخط كس نسبة إلى حجم نافذة المستخدم ، استخدم إم. يتوافق 1 م مع حجم الخط الأساسي المحدد في الأنماط الشائعة ، وسيكون 2 م ضعف حجم الخط الأساسي. في الوقت نفسه ، سيتغير م اعتمادا على حجم النافذة ، مما يعني أنه سيتم ضبط حجم الخط تلقائيا
على سبيل المثال ، يمكنك تعيين حجم الخط في استعلام وسائط للأجهزة المحمولة على النحو التالي:
"'المغلق
@شاشة الوسائط و (أقصى عرض: 480 بكسل) {
الجسم {
حجم الخط: 120%;
}
}
«`
في هذا المثال ، إذا كان عرض النافذة أقل من أو يساوي 480 بكسل ، فسيتم زيادة حجم خط صفحة الويب بنسبة 20 ٪ من حجم الخط الأساسي. سيضمن ذلك قراءة أفضل للنص على الشاشات الصغيرة للأجهزة المحمولة.
- طرق لتغيير حجم الخط المغلق
- استفسارات وسائل الإعلام للتكيف
- استخدام وحدات القياس كنسبة مئوية
- التكبير هو خاصية للتكبير
طرق لتغيير حجم الخط المغلق
1. استخدام وحدات القياس النسبية
طريقة واحدة لتغيير حجم الخط كس اعتمادا على حجم النافذة هو استخدام وحدات القياس النسبية مثل النسب المئوية ( ٪ ) ، إم أو ريم. تسمح لك هذه الوحدات بتعيين حجم الخط بالنسبة للعنصر الأصل أو حجم الخط الأساسي للصفحة.
2. استخدام استعلامات الوسائط
هناك طريقة أخرى لتغيير حجم خط كس اعتمادا على حجم النافذة وهي استخدام استعلامات الوسائط. تسمح لك استعلامات الوسائط بتعيين أنماط مختلفة لأحجام أو أجهزة شاشة مختلفة. يمكنك تحديد قيم مختلفة لحجم الخط في استعلامات وسائط مختلفة لتكييفها مع أجهزة مختلفة.
3. باستخدام جافا سكريبت
الطريقة الثالثة لتغيير حجم الخط كس اعتمادا على حجم النافذة هو استخدام جافا سكريبت. يمكنك استخدام جافا سكريبت لتحديد حجم النافذة الحالي وضبط حجم الخط المناسب. على سبيل المثال ، يمكنك استخدام جافا سكريبت لتعيين قيمة خاصية "حجم الخط" اعتمادا على حجم النافذة.
تعتمد طريقة تغيير حجم خط كس اعتمادا على حجم النافذة على احتياجاتك الخاصة وقيود المشروع. النظر في كل طريقة واختيار واحد الذي يناسب الاحتياجات الخاصة بك.
استفسارات وسائل الإعلام للتكيف
يتم تعيين استعلامات الوسائط باستخدام قاعدة @ميديا ، والتي تسمح لك بتحديد الشروط التي يتم بموجبها تطبيق أنماط معينة. على سبيل المثال ، يمكنك تحديد أنه إذا كان عرض الشاشة أقل من 600 بكسل ، فيجب تكبير النص بمقدار 20%:
@الوسائط (أقصى عرض: 600 بكسل) {
الجسم {
حجم الخط: 20 بكسل;
}
}
في هذا المثال ، نحدد استعلام وسائط باستخدام قاعدة العرض الأقصى ، والتي تقيد استخدام الأنماط عندما يكون عرض الشاشة أقل من أو يساوي 600 بكسل. داخل كتلة القواعد ، نحدد النمط الذي يجب تطبيقه عند استيفاء الشرط.
يمكن استخدام استعلامات الوسائط لخصائص الجهاز المختلفة مثل عرض الشاشة وكثافة البكسل واتجاه الشاشة وما إلى ذلك. على سبيل المثال ، يمكنك تعيين أنماط الطباعة باستخدام استعلام الوسائط التالي:
@وسائل الإعلام طباعة {
الجسم {
حجم الخط: 12 نقطة;
}
}
وبالتالي ، سيتم استخدام خط 12 نقطة عند طباعة الصفحة.
يتيح لك استخدام استعلامات الوسائط إنشاء تصميم ويب متكيف يبدو جيدا على الأجهزة المختلفة. هذا مهم بشكل خاص في الوقت الحاضر ، عندما يصل العديد من المستخدمين إلى صفحات الويب باستخدام الأجهزة المحمولة.
استخدام وحدات القياس كنسبة مئوية
لتعيين حجم الخط كنسبة مئوية ، استخدم قيمة النسبة المئوية بالنسبة إلى حجم الخط الأساسي ، الذي تم تعيينه للعنصر الأصل أو للمستند بأكمله. على سبيل المثال ، إذا كان حجم الخط الأساسي 16 بكسل ، فستكون قيمة الخط 100 ٪ 16 بكسل.
تتمثل ميزة استخدام وحدات النسبة المئوية في أنه يتم تحجيمها تلقائيا عند تغيير حجم نافذة المتصفح. يتيح لك ذلك إنشاء واجهات تكيفية تتكيف مع الأجهزة المختلفة ودقة الشاشة.
على سبيل المثال ، لتعيين حجم الخط لرأس ح1 إلى 200 ٪ من حجم الخط الأساسي ، يمكنك استخدام رمز كس التالي:
ح1 {
حجم الخط: 200%;
}
وبالتالي ، فإن حجم الخط لـ ح1 سيكون رأس ضعف حجم الخط الأساسي.
يتيح لك استخدام وحدات القياس بالنسب المئوية أيضا إنشاء واجهات ديناميكية حيث يتم ضبط حجم العناصر تلقائيا على حجم نافذة المتصفح. على سبيل المثال ، يمكنك تعيين عرض سطر نص يساوي 50٪ من عرض نافذة المتصفح:
ص {
| العرض: 50%; | } |
|---|---|
| وبالتالي ، سيكون عرض سطر النص مساويا لنصف عرض نافذة المتصفح. | |
| يتيح لك استخدام وحدات القياس بالنسب المئوية إنشاء واجهات مرنة تتكيف مع أحجام ودقة الشاشة المختلفة. يساعد هذا في تحسين تجربة المستخدم ويجعل مواقع الويب أكثر ملاءمة للعرض على الأجهزة المختلفة. | التكبير هو خاصية للتكبير |
| كس لديه خاصية التكبير التي تسمح لك لتوسيع نطاق العناصر على صفحة ويب. تحدد هذه الخاصية مقياس العنصر ومحتوياته. يمكن أن تكون خاصية التكبير / التصغير مفيدة عند إنشاء صفحات ويب سريعة الاستجابة ، عندما تحتاج إلى تغيير حجم الخط اعتمادا على حجم النافذة. | القيم الممكنة لخاصية التكبير: |
المعنى
يتم عرض العنصر بالمقياس العادي (100٪).
إعادة تعيين
تعيد هذه القيمة تعيين مقياس العنصر إلى حجمه الأصلي.