الدرس 2 من 8
حجم يتنفّس
- 12 دقيقة
- 5 معايير للتصحيح
- 3 تلميحات
- إلى المطلوب
هدف الدرس
clamp بدل نقاط الكسر
01
الشرح
العنوان الذي يليق بشاشة كبيرة يخنق شاشة الجوّال. الحلّ المعتاد استعلامات وسائط ثلاثة لكل حجم — ثم تكتشف أن بينها قفزات.
clamp(أدنى, مرغوب, أقصى) يحلّها بسطر: تعطي حدًّا أدنى وحدًا أعلى، وقيمة وسطى تتبع عرض الشاشة بـ vw. المتصفح يتدرّج بينهما بلا قفزة ولا استعلام.
واحرص أن يحوي الوسط وحدة نسبية (rem مع vw)، وإلا تعطّل تكبير النصّ على من يحتاجه.
02
المطلوب
اجعل حجم h1 بـ clamp بين 28 و56 بكسل.
معايير التصحيح
5 معايير- حجم h1 لا يقلّ عن 28 بكسل
- ولا يتجاوز 56 بكسل
- الحجم مكتوب بـ clamp()
- الجزء المتغيّر يعتمد عرض الشاشة (vw)
- وفيه جزء نسبي يبقي التكبير ممكنًا (rem أو em)