تولید کننده مدیا کوئری ویوپورت
مدیا کوئری‌های CSS را برای طراحی وب واکنش‌گرا تولید کنید.
تنظیمات مدیا کوئری
شرایط مدیا کوئری را پیکربندی کنید
شرط 1
از پیش تعیین شده‌ها
الگوهای مدیا کوئری پرکاربرد را انتخاب کنید
CSS تولید شده
@media screen and (max-width: 768px) {
/* Your CSS rules here */
}نقاط شکست رایج
موبایل:
max-width: 480pxتبلت:
481px - 768pxدسکتاپ:
min-width: 1024pxدسکتاپ بزرگ:
min-width: 1200pxراهنمای مدیا کوئری
ویژگی‌های کلیدی رسانه
- • عرض/ارتفاع: عرض/ارتفاع ویوپورت
- • min-width/max-width: شرایط حداقل/حداکثر عرض
- • جهت‌گیری: جهت‌گیری صفحه (عمودی/افقی)
- • وضوح: وضوح صفحه (نمایشگرهای رتینا و غیره)
- • شناور: پشتیبانی از قابلیت شناور
- • اشاره‌گر: دقت اشاره‌گر (لمسی/ماوس)
نکات استفاده
- • رویکرد اول موبایل: از min-width برای طراحی از صفحه‌های کوچک استفاده کنید
- • شرایط پیچیده را با عملگرهای منطقی ترکیب کنید
- • از نوع رسانه چاپ برای سبک‌های چاپ جداگانه استفاده کنید
- • از وضوح برای پشتیبانی از نمایشگرهای با وضوح بالا استفاده کنید