Media Queries
محتویات
- ۱ Media Queries در CSS - مثالهای بیشتر
- ۲ Media Querieها برای منوها
- ۳ Media queryها برای ستون ها
- ۴ پنهان سازی عناصر با Media Querieها
- ۵ تغییر اندازه قلم با Media Querieها
- ۶ گالری تصاویر منعطف
- ۷ وبسایت منعطف (به انگلیسی: Flexible)
- ۸ جهت قرارگیری: عمودی / افقی
- ۹ کمترین عرض تا بیشترین عرض
- ۱۰ مرجع @media در CSS
- ۱۱ منابع آموزشی
Media Queries در CSS - مثالهای بیشتر
می خواهیم به مثالهای بیشتری از استفاده media queryها بیندازیم.[۱]
Media queryها روش های محبوبی برای ارائه یک style sheet مناسب برای دستگاههای مختلف هستند. برای نمایش یک مثال ساده، میتوانیم رنگ پس زمینه را برای دستگاههای مختلف عوض کنیم:
آیا شما میخواهید بدانید چرا ما دقیقاً از ۹۹۲ پیکسل و ۶۰۰ پیکسل استفاده میکنیم؟ آنها «نقاط شکست معمول» (Typical breakpoint) دستگاه ها هستند.
نکته: شما میتوانید در مورد نقاط شکست معمول در آموزش طراحی وب واکنش گرا مطالب بیشتری بخوانید.
Media Querieها برای منوها
در این مثال، ما از media queryها برای ساخت یک منوی navigation واکنش گرا استفاده میکنیم، که در طراحی صفحه نمایشهای با اندازه های مختلف، متفاوت است.
صفحه نمایشهای بزرگ
صفحه نمایشهای کوچک
Media queryها برای ستون ها
یک استفاده رایج از media queryها، ساخت یک چیدمان منعطف (به انگلیسی: flexible) است. در این مثال، چیدمانی میسازیم که بین چهار، دو، و ستونهای تمام عرض با توجه به اندازه صفحه نمایشها متفاوت است.
صفحه نمایشهای بزرگ
صفحه نمایشهای متوسط
صفحه نمایشهای کوچک
نکته: یک راه مدرنتر برای ساخت چیدمانهای ستون بندی شده، استفاده از Flexbox در CSS است (مثال زیر را ببینید). اما، این ویژگی در اینترنت اکسپلور ۱۰ و نسخه های قدیمیتر پشتیبانی نمیشود. اگر نیازمند پشتیبانی از IE6 تا IE10 هستید، از floatها استفاده کنید (همانطور که در بالا نشان داده شد).
برای یادگیری مطالب بیشتر در مورد ماژول چیدمان flexible box، فصل flexbox در CSS ما را مطالعه کنید.
برای یادگیری مطالب بیشتر در مورد طراحی واکنش گرای وبسایت، آموزش طراحی واکنش گرای وب ما را بخوانید.
پنهان سازی عناصر با Media Querieها
استفاده رایج دیگر media queryها، برای مخفی کردن عناصر در صفحه نمایشهای با اندازههای مختلف است.
من روی صفحه نمایشهای کوچک مخفی خواهم بود.
تغییر اندازه قلم با Media Querieها
شما همچنین میتوانید از media queryها برای تغییر اندازه قلم یک عنصر روی صفحه نمایشهای مختلف با اندازههای متفاوت استفاده کنید:
گالری تصاویر منعطف
در این مثال، از media queryها به همراه flexbox برای ساخت یک گالری تصاویر واکنش گرا استفاده میکنیم.
وبسایت منعطف (به انگلیسی: Flexible)
در این مثال، از media queryها به همراه flexbox برای ساخت یک وبسایت واکنش گرا، شامل یک navigation bar منعطف و محتوای منعطف استفاده میکنیم.
جهت قرارگیری: عمودی / افقی
همچنین Media queryها میتوانند برای تغییر چیدمان یک صفحه با توجه به جهت قرارگیری مرورگر استفاده شوند.
میتوانید مجموعه ویژگیهای CSS داشته باشید که تنها زمانی که پنجره مرورگر بزرگتر از ارتفاع آن باشد اعمال می شود، همان جهت Landscape :
کمترین عرض تا بیشترین عرض
همچنین میتوانید از مقادیر (max-width: ..) and (min-width: ..)
برای تنظیم کمترین میزان عرض و بیشترین میزان عرض استفاده کنید.
برای مثال، زمانی که عرض مرورگر بین ۶۰۰ و ۹۰۰ پیکسل است، ظاهر یک عنصر <div> را تغییر میدهد:
استفاده از یک مقدار اضافی: در مثال زیر، میتوانیم با یک کاما یک media query اضافه به media query قبلی خود اضافه کنیم (این کار همانند عملگر OR عمل خواهد کرد):
مرجع @media در CSS
برای یک مرور کامل همه انواع رسانه و امکانات/دستورات، لطفاً مرجع @media در مرجع CSS ما را مطالعه کنید.
نکته: برای یادگیری مطالب بیشتر در مورد طراحی واکنش گرای وب (چگونه دستگاه و صفحه نمایشهای متفاوت را هدف قرار دهیم)، با استفاده از breakpointهای media query، آموزش طراحی وب واکنش گرای ما را مطالعه کنید.
منابع آموزشی