درس 39؛ طراحی واکنش گرا و Mobile First
ZIP را استخراج و index.html را باز کنید. پروژه بدون اینترنت و نصب اجرا می شود.
عرض های 320، 375، 799، 800 و 1280px را بررسی کنید. معرفی تا پیش از 800px یک ستون و از 800px دو ستون است.
تصویر محلی با ابعاد مشخص داخل پروژه قرار دارد. منو باید در فضای کم به خط بعد برود. همه متن ها و لینک ها باید در نسخه باریک باقی بمانند.
متن یک کارت را سه برابر کنید، عنوان را بلند کنید و بزرگ نمایی مرورگر را به 200 درصد برسانید. افقی شدن ناخواسته صفحه، هم پوشانی و حذف محتوا را بررسی کنید. با Tab همه لینک ها را دنبال کنید.
تمرین: tools در حالت پایه ستونی است. از عرض 700px آن را ردیفی و چندخطی کنید.
پاسخ با افزودن این خط در head پس از style.css فعال می شود:
<link rel="stylesheet" href="solution.css">
در 699 و 700px رفتار پاسخ را مقایسه کنید.
