كيفية إنشاء خط التكيف باستخدام كس

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

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

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

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

حجم الخط: 100%;

وبالتالي ، إذا كان حجم خط العنصر الأصل 14 بكسل ، فسيكون حجم خط العنصر الفرعي أيضا 14 بكسل.

1. لماذا أحتاج إلى خط التكيف?
2. الخط الذي يجب أن أختار لتصميم استجابة?
3. الخطوة 1: استخدام وحدات القياس النسبية
4. مزايا استخدام الوحدات النسبية
5. كيفية استخدام الوحدات النسبية في كس
6. الخطوة 2: استخدم استعلامات الوسائط
7. كيف تعمل استعلامات الوسائط
8. أمثلة على استعلامات الوسائط لخط متكيف

لماذا أحتاج إلى خط التكيف?

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

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

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

الخط الذي يجب أن أختار لتصميم استجابة?

عند اختيار خط للتصميم التكيفي ، من الضروري مراعاة عدد من العوامل المهمة التي ستساعد في ضمان راحة النص وقابليته للقراءة على الشاشات المختلفة:

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

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

الخطوة 1: استخدام وحدات القياس النسبية

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

. باستخدام هذا الأسلوب ، سيتم قياس حجم الخط تلقائيا وسيتكيف بشكل أفضل مع الشاشات والأجهزة المختلفة.

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

مزايا استخدام الوحدات النسبية

عند العمل مع التصميم التكيفي وإنشاء خط تكيفي ، فإن استخدام وحدات القياس النسبية في كس له عدد من المزايا:

1. المرونة والقدرة على التكيف

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

2. سهولة الاستخدام

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

3. دعم دقة الشاشة المختلفة

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

4. سهولة الحسابات

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

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

كيفية استخدام الوحدات النسبية في كس

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

الفائدة ( ٪ ):

يتم تحديد النسب المئوية ٪ من عرض أو ارتفاع العناصر في كس بالنسبة للحاوية الأم. على سبيل المثال ، إذا قمت بتعيين عرض عنصر إلى 50 ٪ ، فسيشغل نصف عرض الحاوية الأصلية.

م:

يتم تحديد الوحدة "م" بالنسبة لحجم خط العنصر الأصل. إذا كان حجم خط العنصر الأصل 16 بكسل ، فسيكون 1 دقيقة 16 بكسل. إذا قمت بتعيين حجم خط 1.5 م لعنصر ، فسيكون 24 بكسل (1.5 * 16 بكسل).

ريم:

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

فولكس فاجن / ف:

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

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

الخطوة 2: استخدم استعلامات الوسائط

تتيح لك استعلامات الوسائط تحديد أنماط مختلفة للأجهزة والشاشات المختلفة. يتيح لك ذلك إنشاء خط متكيف سيتم عرضه على النحو الأمثل على أي جهاز.

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

على سبيل المثال ، يمكنك تعيين أحجام خطوط مختلفة للشاشات الصغيرة والشاشات الكبيرة.:

@شاشة الوسائط و (أقصى عرض: 768 بكسل) {

ص {

حجم الخط: 14 بكسل;

}

}

}

في هذا المثال ، سيتم استخدام حجم خط 14 بكسل للشاشات التي يصل عرضها إلى 768 بكسل ، و 16 بكسل للشاشات التي يزيد عرضها عن 768 بكسل.

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

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

كيف تعمل استعلامات الوسائط

يحتوي كس على بناء جملة خاص لإضافة استعلامات الوسائط إلى الأنماط. يتكون بناء الجملة من كلمة رئيسية

• ، وبعد ذلك يتم تحديد الشرط الذي يجب بموجبه تطبيق أنماط معينة. على سبيل المثال,
• يعني أنه سيتم تطبيق الأنماط فقط على الأجهزة التي يصل عرض الشاشة إلى 600 بكسل.
• يعد استخدام استعلامات الوسائط مفيدا بشكل خاص عند تطوير مواقع الويب سريعة الاستجابة. إنها تسمح لك بتغيير مظهر العناصر وموقعها اعتمادا على حجم الشاشة ، مما يجعل الموقع مناسبا ويلبي احتياجات المستخدمين بأجهزة مختلفة.
• أمثلة على استعلامات الوسائط لخط متكيف
• @الوسائط (أقصى عرض: 767 بكسل) { ... }

: سيتم تطبيق استعلام الوسائط هذا على الشاشات التي يبلغ عرضها الأقصى 767 بكسل. يمكنك تعيين الأنماط المناسبة للخط التكيفي هنا.