شرح صفوف ومحتوى الفقرة
بدلاً من القفز المفاجئ في الأحجام عبر عدة نقاط توقف في @media، يتيح دمج المتغيرات المخصصة مع دوال min() وmax() ودالة الحصر clamp(min, preferred, max) بناء خطوط وحشوات انسيابية تتدرج بنعومة تامة. فعند تخزين الحد الأدنى والأقصى في متغيرات مثل --title-min: 1.35rem و--title-max: 2.25rem، تتدرج القيمة تلقائياً بين الهاتف والشاشات العريضة.
احرص دائماً على مزج وحدة خط نسبية مثل rem مع وحدة عرض المنفذ vw في المعادلة الوسطى مثل 1rem + 2.2vw بدلاً من الاعتماد على vw وحدها، وذلك لضمان استجابة النص لتكبير المتصفح لدى المستخدمين.
CSS
:root {
--pad-fluid: clamp(14px, 3vw, 32px);
--heading-fluid: clamp(1.25rem, 1rem + 2vw, 2.1rem);
}
.hero-panel {
width: min(100%, 640px);
padding: var(--pad-fluid);
}
.hero-heading {
font-size: var(--heading-fluid);
}