الخط المستجيب أو المتجاوب هو حلم أي مطور ويب. لقد راجعت العديد من خيارات التنفيذ ، جلست في المساء وخرجت بخيار عمل موثوق به. اريد مشاركته معك. مكافأة SCSS Mixin!لذا فإن التحدي. حدد القيمة وفقًا للتخطيط ، وكذلك الحد الأدنى للقيمة التي سيبدو عليها النص أو العنوان بشكل جيد على الأجهزة المحمولة ، على سبيل المثال iPhone 5 (320 بكسل). في هذه الحالة ، يتكيف الخط أو يزداد أو ينقص اعتمادًا على عرض الشاشة.نأخذ القيم الأولية من التخطيط ، على سبيل المثال ، رأس H1 بحجم 40 بكسل. نحتاج أيضًا إلى عرض تخطيط اللوحة بأكملها ، على سبيل المثال 1280 بكسل.
للحصول على الحد الأدنى لقيمة الخط ، نقوم بتكوين الرأس وفقًا للتخطيط ، وباستخدام أدوات مطوري Chrome (F12) ، حدد الحد الأدنى المطلوب لحجم الشاشة وحدد حجم الخط ، وقم بتغيير القيمة حتى يبدو النص مناسبًا. حصلت على 24 بكسل
بعد ذلك في CSS ، بدلاً من حجم الخط: 40 بكسل ؛ اكتب التالي.font-size: calc(24px + 16 * (100vw / 1280));
حيث 24 بكسل هو الحد الأدنى للخط لدينا ، 16 هو الفرق بين الخط في التخطيط 40 والحد الأدنى للخط في 24 (40-24 = 16). 100vw هو العرض الحالي الكامل لإطار العرض (الشاشة) ؛ 1280 هو عرض التخطيط.نختبر ونحصل على خط متجاوب يتطابق تمامًا مع حجم التخطيط.ولكن ، بحجم 320 بكسل ، لن نرى النتيجة المرجوة ، أي خط 24 بكسل. هذا يرجع إلى حقيقة أننا لم نحدد الحد الأدنى لحجم الشاشة بدقة 320 بكسل.
لحل الموقف ، نكتب طلب وسائط لـ 767 بكسل ، وداخله نغير الصيغة:@media (min-width: 767px){
h1 {
font-size: calc(24px + (16 + 16 * 0.7) * ((100vw - 320px) / 1280));
}
}
هنا نطرح 320 بكسل من العرض الكامل لإطار العرض ، بالإضافة إلى إضافة عدد إضافي من 16 نضيف 70٪ (16 + 16 * 0.7).نتحقق ونرى الامتثال الكامل للمهمة! في نفس الوقت ، يتم الانتقال إلى نقطة الكسر بسلاسة وليس بشكل ملحوظ!بالطبع ، يمكننا إغلاق كل هذا في مزيج SCSS:$maxWidth: 1280;
@mixin adaptiv-font($pcSize, $mobSize) {
$addSize: $pcSize - $mobSize;
$addMobSize: $addSize + $addSize * 0.7;
@media (max-width: 767px) {
font-size: calc(#{$mobSize + px} + #{$addMobSize} * ((100vw - 320px) / #{$maxWidth}));
}
@media (min-width: 767px) {
font-size: calc(#{$mobSize + px} + #{$addSize} * (100vw / #{$maxWidth}));
}
}
وربط على النحو التالي:h1{
@include adaptiv-font(40, 24);
}
يمكنك التخلص تمامًا من استعلام الوسائط:$maxWidth: 1280;
@mixin adaptiv-font($pcSize, $mobSize) {
$addSize: $pcSize - $mobSize;
$maxWidth: $maxWidth - 320;
font-size: calc(#{$mobSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth}));
}
يسعدني أن أقرأ في التعليقات كيف يمكن تحسين هذا الحل. شكرا للانتباه!استنادًا إلى مواد من الفيديو " Adaptive Font. مثال على تنفيذ خط متجاوب (مطاطي) على مزيج CSS + SCSS " على قناة YouTube " Freelancer for Life "