يتزايد عدد المستخدمين الذين يستخدمون الأجهزة المحمولة لقراءة المحتوى باستمرار في العالم. هذا يعني أن مطوري الويب بحاجة إلى التأكد من سهولة قراءة النص على جميع الأجهزة حتى يتمكن المستخدمون من تلقي المعلومات بشكل مريح بغض النظر عن حجم الشاشة.
تسمح لك أحجام الخطوط التكيفية في كس بإنشاء تخطيط مرن وسهل القراءة. تسمح لك بتغيير حجم الخط تلقائيا اعتمادا على دقة الشاشة أو حجم الجهاز.
استخدام أحجام الخطوط التكيفية له العديد من المزايا. أولا ، يقومون بإنشاء قراءة أكثر متعة للنص على الشاشات الصغيرة ، مما يحسن تجربة المستخدم. ثانيا ، توفر أحجام الخطوط هذه إمكانية وصول أفضل للمستخدمين الذين يعانون من مشاكل بصرية ، مما يسمح لهم برؤية النص بشكل أفضل على الشاشات الكبيرة.
ومع ذلك ، يتطلب إنشاء حجم خط متكيف بعض الجهد الإضافي. للقيام بذلك ، يمكنك استخدام وحدات قياس مختلفة ، مثل إم ، ريم أو فولكس فاجن ، فضلا عن استعلامات وسائل الإعلام. كل هذا يسمح للمطورين بإنشاء تخطيط ويب مرن وقابل للتكيف لتحسين تجربة المستخدم وإنشاء إمكانية وصول أفضل للمحتوى.
في هذه المقالة ، سننظر في طرق مختلفة لإنشاء أحجام خطوط تكيفية في كس. وسوف ننظر أيضا في مزايا وعيوب كل واحد منهم بحيث يمكنك اختيار الحل الأنسب لمشروعك.
- أحجام الخطوط كس التكيف: مما يجعل من السهل قراءة على جميع الأجهزة
- مشكلة تغيير أحجام الخطوط على الأجهزة المختلفة
- الحل رقم 1: استخدام وحدات القياس النسبية
- الحل رقم 2: استعلامات الوسائط لأجهزة مختلفة
- الحل رقم 3: استخدام وحدات القياس بناء على عرض الشاشة
أحجام الخطوط كس التكيف: مما يجعل من السهل قراءة على جميع الأجهزة
يمكن استخدام تقنيات كس المختلفة لإنشاء أحجام الخطوط التكيفية. واحدة من أكثر الطرق شيوعا هي استخدام وحدات القياس النسبية ، مثل النسب المئوية أو م.
على سبيل المثال ، يمكنك تعيين حجم النص كنسبة مئوية:
سيحدد هذا الرمز 100 ٪ من حجم الخط الأساسي ، مما سيسمح للنص بالتوسع تلقائيا وفقا لجهاز المستخدم.
طريقة أخرى هي استخدام حجم الخط النسبي م. للقيام بذلك ، تحتاج إلى تحديد حجم الخط الأساسي وتغييره باستخدام مضاعف.
يتيح لك هذا الأسلوب تعيين حجم الخط بناء على الحجم الحالي للعنصر أو الحاوية الأصلية.
يمكنك أيضا استخدام استعلامات وسائط كس لتحديد أحجام الخطوط المختلفة على أجهزة مختلفة. على سبيل المثال:
يحدد هذا الرمز أحجام خطوط مختلفة لنطاقات عرض الشاشة المختلفة ، مما يسمح لك بإنشاء إمكانية قراءة النص المثلى على أنواع مختلفة من الأجهزة.
كل هذه الأساليب تسمح لك لخلق أحجام الخطوط كس التكيف وتوفير قراءة النص مريحة على جميع الأجهزة. هذا جانب مهم من تطوير مواقع الويب يساعد على تحسين تجربة المستخدم وتحسين التواصل مع الزوار.
مشكلة تغيير أحجام الخطوط على الأجهزة المختلفة
ومع ذلك ، على الشاشات الكبيرة مثل أجهزة الكمبيوتر المكتبية أو أجهزة الكمبيوتر المحمولة ، قد يبدو النص كبيرا جدا ويشغل مساحة كبيرة جدا. هذا يخلق إزعاجا للمستخدمين وقد يؤدي إلى حدوث انتهاكات في تصميم صفحة الويب.
ترتبط مشكلة تغيير أحجام الخطوط على الأجهزة المختلفة بعوامل مختلفة مثل كثافة بكسل الشاشة وحجم الشاشة وإعدادات المستخدم. كمطور ويب ، تحتاج إلى إيجاد طريقة لإنشاء قراءة نصية مريحة على جميع الأجهزة من أجل عبور الحدود بين الأجهزة المختلفة.
يستخدم المزيد والمزيد من الأشخاص الأجهزة المحمولة لتصفح الويب ، لذلك من المهم جدا تطوير تصميم سريع الاستجابة يقوم تلقائيا بتغيير حجم الخطوط وفقا لحجم الشاشة.
لحل مشكلة تغيير أحجام الخطوط على أجهزة مختلفة ، يمكن لمطوري الويب استخدام طرق مختلفة ، مثل استعلامات وسائط كس ، والتي تسمح لك بتعيين أنماط مختلفة لأحجام مختلفة للشاشة; وحدات القياس النسبية ، مثل إم و ريم ، والتي يتم تحجيمها تلقائيا وفقا لحجم خط العنصر الأصل وحجم الجهاز ؛ وكذلك مكتبات جافا سكريبت والمكونات الإضافية لحلول أكثر تعقيدا ومرونة.
الحل رقم 1: استخدام وحدات القياس النسبية
يمكن أن تكون النسب المئوية مفيدة عندما نريد تعيين حجم الخط بالنسبة لحجم الأصل. على سبيل المثال ، يمكننا تعيين حجم الخط كنسبة مئوية من عرض الكتلة التي يقع فيها. إذا تغير عرض الكتلة اعتمادا على حجم نافذة المتصفح أو الجهاز ، فسيتم تغيير حجم الخط تلقائيا وفقا لذلك.
وحدة قياس نسبية أخرى هي م. يقوم بتعيين حجم الخط بالنسبة إلى حجم الخط للعنصر الأصلي. على سبيل المثال ، إذا كان حجم خط العنصر الأصل 16 بكسل ، وقمنا بتعيين حجم الخط للعنصر الفرعي على 1.5 م ، فسيكون حجم خط العنصر الفرعي 24 بكسل (1.5*16).
يتيح لك استخدام وحدات القياس النسبية إنشاء أحجام خطوط متناسبة وقابلة للتكيف يتم قياسها تلقائيا اعتمادا على حجم الشاشة أو الجهاز. يتيح ذلك قراءة مريحة على جميع أنواع الأجهزة ويزيد من إمكانية الوصول الإجمالية للمحتوى.
مزايا وحدات القياس النسبية:
- المرونة والقدرة على التكيف: يتم تحجيم أحجام الخطوط تلقائيا اعتمادا على حجم الشاشة أو الجهاز;
- سهولة القراءة: يمكن تحسين أحجام الخطوط لأنواع معينة من الأجهزة ، مما يوفر تجربة قراءة أكثر راحة;
- دعم إمكانية الوصول: يمكن للمستخدمين تخصيص أحجام الخطوط وفقا لاحتياجاتهم وتفضيلاتهم;
باستخدام وحدات القياس النسبية ، يمكننا إنشاء أحجام خطوط تكيفية من شأنها تحسين إدراك المحتوى على الأجهزة المختلفة وضمان سهولة الاستخدام.
الحل رقم 2: استعلامات الوسائط لأجهزة مختلفة
لإنشاء أحجام خطوط تكيفية على أجهزة مختلفة ، يمكننا استخدام استعلامات الوسائط في كس. تتيح لك استعلامات الوسائط تحديد أنماط مختلفة لأنواع مختلفة من الأجهزة ، مثل الهواتف المحمولة والأجهزة اللوحية وأجهزة الكمبيوتر المكتبية.
يعد تطبيق استعلامات الوسائط على أحجام الخطوط التكيفية أمرا بسيطا للغاية. يمكننا تحديد الشروط التي بموجبها سيغير الخط حجمه. على سبيل المثال ، يمكننا تعيين حجم خط واحد للأجهزة ذات عرض الشاشة أقل من 768 بكسل وحجم آخر للأجهزة ذات عرض الشاشة أكبر من أو يساوي 768 بكسل.
للقيام بذلك ، نستخدم الكلمة الأساسية "الوسائط" ونحدد الشروط بين قوسين ، متبوعة بكتلة من القواعد مع أنماط للأجهزة المقابلة. على سبيل المثال:
@الوسائط (أقصى عرض: 768 بكسل) {ص {
حجم الخط: 16 بكسل;
}
}
@وسائل الإعلام (دقيقة العرض: 769 بكسل) {
}
}
في هذا المثال ، نحدد أنه بالنسبة للأجهزة التي يقل عرض الشاشة فيها عن 768 بكسل أو يساوي 768 بكسل ، يجب أن يكون حجم الخط 16 بكسل ، وبالنسبة للأجهزة التي يزيد عرض الشاشة فيها عن 768 بكسل ، 18 بكسل.