قد يكون تغيير حجم الخط على موقع الويب ضروريا لتحقيق المظهر الأمثل للنص وسهولة القراءة على الأجهزة المختلفة. واحدة من الطرق الفعالة لضبط حجم الخط في كس هو تكييفه اعتمادا على عرض شاشة المستخدم. يتيح لك هذا الأسلوب الحفاظ على الخطوط العريضة للنص ، وكذلك تحسين رؤيته على الأجهزة المحمولة والأجهزة اللوحية.
هناك العديد من الطرق التي تسمح لك بتعيين حجم خط كس بالنسبة لعرض الشاشة. أحدها هو استخدام وحدات القياس النسبية ، مثل النسب المئوية أو "فولكس فاجن" (عرض إطار العرض). تسمح لك النسب المئوية بتعيين حجم الخط بالنسبة إلى حجم العنصر الأصل أو نافذة المتصفح. في المقابل ، "فولكس فاجن" يحدد حجم الخط بالنسبة لعرض المنطقة المرئية من المتصفح.
على سبيل المثال ، لتعيين حجم خط يساوي 5 بالمائة من عرض الشاشة ، يمكنك استخدام رمز كس التالي: حجم الخط: 5%;
طريقة أخرى هي استخدام استعلامات الوسائط في كس. تسمح لك استعلامات الوسائط بتطبيق أنماط معينة على العناصر اعتمادا على خصائص الجهاز. على سبيل المثال ، يمكنك تعيين أحجام خطوط مختلفة للشاشات بعرض أقل من 768 بكسل أو أكثر:
عند استخدام هذه الطرق ، من الضروري اختبار الخط على أجهزة مختلفة وفي مناطق مختلفة من موقع الويب للتأكد من أنه قابل للقراءة جيدا ومتسق مع النمط العام.
حجم الخط في كس: أفضل الطرق لتخصيص
استخدام وحدات القياس المطلقة
واحدة من أسهل الطرق لضبط حجم الخط في كس هو استخدام وحدات القياس المطلقة مثل بكسل (بكسل) أو نقاط (بت). على سبيل المثال ، يمكنك تعيين حجم الخط على النحو التالي:
يتيح لك هذا الأسلوب التحكم بدقة في حجم الخط ، ولكنه لا يأخذ في الاعتبار حجم شاشة المستخدم. لذلك ، قد يبدو الخط صغيرا جدا أو كبيرا جدا على أجهزة مختلفة.
استخدام وحدات القياس النسبية
للحصول على إعدادات حجم الخط الأكثر مرونة في كس ، يمكنك استخدام وحدات القياس النسبية مثل النسب المئوية ( ٪ ) أو الوحدات النسبية (إم أو ريم). على سبيل المثال ، يمكنك تعيين حجم الخط بالنسبة لحجم الخط الأساسي للمستند (يتم تعيينه افتراضيا) على النحو التالي:
}
يتيح لك هذا الأسلوب إنشاء تصميم متكيف حيث يتغير حجم الخط تلقائيا اعتمادا على حجم شاشة المستخدم.
استخدام استعلامات الوسائط
لضبط حجم الخط بشكل أكثر دقة اعتمادا على عرض شاشة المستخدم ، يمكنك استخدام استعلامات الوسائط. على سبيل المثال ، يمكنك تعيين أحجام خطوط مختلفة لعرض شاشة مختلف على النحو التالي:
}
يتيح لك هذا الأسلوب إنشاء تصميم تكيفي يتم عرضه على النحو الأمثل على أجهزة مختلفة.
باستخدام نهج "الطباعة السائلة"
لضبط حجم الخط تلقائيا في كس اعتمادا على عرض شاشة المستخدم ، يمكنك استخدام نهج "الطباعة السوائل". يعتمد على فكرة أن حجم الخط يجب أن يتسع بشكل متناسب مع التغيير في عرض نافذة المتصفح. على سبيل المثال ، يمكنك استخدام التعليمات البرمجية التالية:
يتيح لك هذا الأسلوب إنشاء تصميم أكثر مرونة وتكيفا ، حيث يتغير حجم الخط تلقائيا اعتمادا على عرض شاشة المستخدم.
اعتمادا على متطلبات المشروع والوضع المحدد ، يمكنك اختيار الطريقة الأنسب لضبط حجم الخط في كس. من المهم أن تضع في اعتبارك إمكانية الوصول إلى المحتوى وقابليته للقراءة للمستخدمين على أجهزة مختلفة.
طريقة استعلام الوسائط لعرض الشاشة المختلفة
يمكنك استخدام استعلامات الوسائط للتحكم في حجم الخط اعتمادا على عرض الشاشة. تسمح لك استعلامات الوسائط بتطبيق أنماط مختلفة على العناصر بناء على خصائص الجهاز الذي يتم عرض صفحة الويب عليه.
يعد التصميم التكيفي أحد أكثر الأمثلة شيوعا لاستخدام استعلامات الوسائط لتغيير حجم الخط. يتيح لك التصميم سريع الاستجابة إنشاء مواقع ويب يتم عرضها على النحو الأمثل على أجهزة مختلفة مثل أجهزة الكمبيوتر والأجهزة اللوحية والهواتف الذكية. للقيام بذلك ، يمكنك استخدام التعليمات البرمجية التالية:
حجم الخط: 14 بكسل;
}
}
}
@شاشة الوسائط و (الحد الأدنى للعرض: 1025 بكسل) {