یک وب سایت واکنش گرا (Responsive) وب سایتی است که مطابق با دستگاه مورد نظر خود سازگار می شود. به عنوان مثال یک وب سایت واکنش گرا طرح خود را با لپ تاپ، تلفن و تبلت سازگار می کند. یک تلفن نمایشگر کوچک‌تری دارد، بنابراین یک وب‌سایت واکنش‌گرا ممکن است اندازه فونت را در صفحه‌های کوچکتر کمی بزرگتر کند.
اما چگونه این کار را انجام می دهید؟ می توانید از پرس و جوهای رسانه ای در CSS خود استفاده کنید تا صریحاً به وب سایت خود بگویید که مطابق با اندازه صفحه تغییر کند.
هدف قرار دادن صفحه نمایش های کوچکتر با پرسش های رسانه ای
بیایید مثالی از تعریف پرس و جوهای رسانه ای را مورد بحث قرار دهیم.
@media (max-width:600px) {
/*
CSS for screens equal to or below 600px
*/
}
در کد بالا، 600px نقطه شکست است این بدان معنی است که شما اندازه صفحه نمایش مساوی یا کمتر را هدف قرار می دهید 600px.
در کد زیر، هر صفحه‌ای برابر یا کمتر از 600 پیکسل، پس‌زمینه آن قرمز است.
@media (max-width:600px) {
body{
background-color: red;
}
}
هدف قرار دادن صفحه نمایش های بزرگتر با درخواست های رسانه ای
در زیر به عنوان مثال 900px نقطه شکست است این صفحه نمایش هایی را هدف قرار می دهد که عرض آنها حداقل است 900px.
@media (min-width:900px) {
/*
CSS for screens equal to or above 900px
*/
}
در مثال زیر، هر صفحه نمایش بزرگتر از 900px پس زمینه آن سبز می شود.
@media (min-width:900px) {
body{
background-color: green;
}
}
هدف قرار دادن یک محدوده صفحه نمایش با استفاده از پرس و جوهای رسانه
کد زیر هر صفحه ای بزرگتر از آن را هدف قرار می دهد 600px و کوچکتر از 900px.
@media (min-width:600px) and (max-width:900px){
body{
background-color: burlywood;
}
}
پرسش‌های رسانه‌ای را در عمل ببینید
برای مشاهده درخواست های رسانه ای در عمل به این لینک بروید! اندازه صفحه نمایش را تنظیم کنید و ببینید که چگونه درخواست های رسانه اعمال می شوند!
برای بررسی کد، به این مخزن GitHub بروید.
بسته شدن!
امیدوارم این آموزش برای شما مفید بوده باشد. ممنون که تا آخر خواندید
من دوست دارم در هر یک از این پلتفرم ها با شما ارتباط برقرار کنم.
