درس 41؛ تصاویر، ویدئوها و فونت های واکنش گرا
index.html را پس از استخراج ZIP باز کنید. تصویر، فونت یکان بخ و ویدئوی بی صدای سه ثانیه ای محلی هستند؛ اینترنت لازم نیست.
عرض های 320، 768، 991، 992 و 1280px را بررسی کنید. ظرف از viewport منهای 32px به سقف 960px می رسد و sizes همین رابطه را توصیف می کند.
برای بررسی srcset، در DevTools تصویر را انتخاب و $0.currentSrc را در Console ببینید. انتخاب مرورگر تضمین ثابت نیست؛ ممکن است فایل بزرگ تر کش شده را نگه دارد. برای بررسی Network، کش را غیرفعال و صفحه را بارگذاری مجدد کنید. در file:// ممکن است رفتار ابزارها با HTTP محلی متفاوت باشد.
ویدئو را با کنترل پخش اجرا کنید؛ صدا و گفتار ندارد. متن توضیحی تمام محتوای نمونه را بیان می کند. برای ویدئوی گفتاردار زیرنویس مناسب هم لازم است.
متن را 200 درصد بزرگ نمایی کنید و عنوان طولانی بنویسید؛ نباید بریده یا پنهان شود.
تمرین: اندازه عنوان practice با clamp بین 1.5rem و 2.5rem، با مقدار میانی 1rem + 2vw.
پاسخ: بعد از style.css این خط را در head اضافه کنید:
<link rel="stylesheet" href="solution.css">
فونت داخل پروژه فقط برای نمونه آموزشی همین پروژه قرار دارد؛ بازتوزیع مستقل یا استفاده تجاری آن را مطابق مجوز فونت انجام دهید.
