طراحی ریسپانسیو در همه جا وجود دارد، و چه از یک چارچوب استفاده کنید و چه خودتان سؤالات رسانه ای را بنویسید، برخی از عناصر روی شما page مجبور به حرکت یا مقیاس هستند.

اگر پرس و جوهای رسانه ای شما مبتنی است روی ابعاد مرورگر و اندازه مرورگر تغییر می کند، سپس عناصر شما در جای خود خواهند پرید. افزودن کمی انیمیشن به این ویژگی ها برای هر سایت واکنش گرا یک لمس خوب است.

امروز، با متحرک کردن عرض و کدورت عناصر بین پرس‌و‌جوهای رسانه، به شما نشان می‌دهم که چقدر آسان است که این لمس اضافی را اضافه کنید.

طرح

برای این مثال ساده از یک div استفاده می کنیم که شامل 3 div کوچکتر است. div ها با توجه به اندازه پنجره مرورگر مقیاس خواهند شد. HTML ساده است:

<div class="layout">
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
</div>

حال، CSS اصلی ما این سه جعبه را در داخل div اصلی و همچنین در راستای حاشیه سمت راست قرار می‌دهد:

.layout {
 width:960px;
 height:600px;
 background:#b34d6f;
 margin:auto;
}
.box {
 width:300px;
 height:200px;
 margin-right:25px;
 background:#4d77b3;
 display:inline-block;
 margin-top:50px;
}
.box:last-child {
 margin-right:0px;
}

این طرح‌بندی اصلی ما است، بدون درخواست‌های رسانه‌ای، اگر نمای پورت تغییر کند، این طرح‌بندی سازگار نخواهد شد. اکنون که اصول اولیه را در اختیار داریم، بیایید درخواست های رسانه ای را اضافه کنیم.

افزودن پرسش های رسانه ای

پرس و جوهای رسانه ای امروزه اغلب مورد استفاده قرار می گیرند. اکثر طراحان وب آنها را درک می کنند، اما در صورتی که اولین بار است، در اینجا یک تازه سازی سریع وجود دارد: پرسش های رسانه ای قابلیت دستگاه مورد استفاده شما (عرض، جهت و وضوح) را بررسی می کنند و در صورت شرایط مشخص شده برای رسانه، CSS خاصی را اجرا می کنند. پرس و جو برآورده شده است. در مثال خود، از دو پرسش رسانه ای استفاده می کنیم که بررسی می کند که آیا مرورگر کوچکتر از 960 پیکسل است یا نه و آیا کوچکتر از 660 پیکسل است. سپس عرض عناصر را بر اساس آن تنظیم می کنیم، همچنین آخرین div فرزند را مخفی می کنیم تا دو قسمت دیگر فضای بیشتری داشته باشند:

@media screen and (max-width:960px) {
 .layout {
 width: 870px;
 }
 .box {
 width:270px;
 }
}
@media screen and (max-width: 660px) {
 .layout {
 width:570px;
 }
 .box {
 width:170px;
 }
 .box:last-child {
 opacity:0;
 }
}

این تمام چیزی است که ما برای پرسش های رسانه ای خود نیاز داریم. توجه داشته باشید که مهم است که این کد زیر کد اصلی CSS در بالا قرار داده شود تا درخواست‌های رسانه کد بالای خود را بازنویسی کنند. اگر اکنون فایل خود را آزمایش کنید، می بینید که اندازه div ها تغییر می کند و کدورت آخرین div فرزند با تغییر اندازه پنجره مرورگر تغییر می کند.

متوجه خواهید شد که برای مخفی کردن آخرین div فرزند، ما کدورت آن را روی 0 تنظیم می کنیم به جای اینکه آن را روی display:none تنظیم کنیم. این به این دلیل است که ما می خواهیم بتوانیم ویژگی را متحرک کنیم. کدورت درجات مختلفی دارد، در حالی که نمایش درست یا نادرست است (و بنابراین نمی توان آن را متحرک کرد).

اضافه شدن انیمیشن

انیمیشن‌های CSS هنگام اجرای این انیمیشن‌های کوچکی که قبلاً در jQuery اجرا می‌کردیم، مانند متحرک کردن رنگ، عرض و شفافیت، واقعاً مفید هستند.

چون ما می خواهیم page برای متحرک سازی به طور کلی، از انتخابگر * CSS استفاده می کنیم و انیمیشن خود را تنظیم می کنیم. انیمیشن‌های CSS به‌خوبی کاهش می‌یابند، اما شما می‌خواهید پیشوندهای فروشنده را نیز اضافه کنید تا حداکثر پشتیبانی وجود داشته باشد:

*{
 -webkit-transition:all 1s ease;
 -moz-transition:all 1s ease;
 -o-transition:all 1s ease;
 transition:all 1s ease;
}

می توانید نتیجه نهایی را مشاهده کنید اینجا.

نتیجه

افزودن انیمیشن‌های ساده مانند این، یک لمس نهایی خوب برای هر وب‌سایتی است. چند خط کد یک جلا دهنده واقعاً زیبا به سایت واکنش گرا شما اضافه می کند.

آیا در پروژه ای پرسش های رسانه ای متحرک داشته اید؟ چه تاثیراتی به دست آورده اید؟ در نظرات به ما اطلاع دهید.

تصویر/تصویر کوچک ویژه، تصویر مقیاس از طریق Shutterstock.