كيف - نص متجاوب
تعرف على كيفية إنشاء طباعة سريعة الاستجابة باستخدام CSS.
مرحبا بالعالم
قم بتغيير حجم نافذة المتصفح لترى كيف يتغير حجم الخط.
حجم الخط سريع الاستجابة
يمكن تعيين حجم النص باستخدام vw
وحدة ، مما يعني "عرض منفذ العرض".
بهذه الطريقة ، سيتبع حجم النص حجم نافذة المتصفح:
مثال
<h1 style="font-size:8vw;">Hello World</h1>
<p
style="font-size:2vw;">Resize the browser window to see how the font size
scales.</p>
منفذ العرض هو حجم نافذة المتصفح. 1vw = 1٪ من عرض منفذ العرض. إذا كان عرض منفذ العرض 50 سم ، يكون 1vw 0.5 سم.
تغيير حجم الخط باستخدام استعلامات الوسائط
يمكنك أيضًا استخدام استعلامات الوسائط لتغيير حجم خط عنصر على أحجام شاشة معينة:
حجم الخط المتغير.
مثال
/* If the screen size is 601px wide or
more, set the font-size of <div> to 80px */
@media screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px wide or less,
set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
نصيحة: انتقل إلى البرنامج التعليمي الخاص بخطوط CSS لمعرفة المزيد حول الخطوط.
لمعرفة المزيد حول استعلامات الوسائط ، اقرأ البرنامج التعليمي الخاص باستعلامات وسائط CSS .