چگونه ایجاد شود: نقاط قطع دستگاه‌های معمولی

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

نقاط قطع دستگاه‌های معمولی

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

برای ساده‌سازی عملیات، می‌توانید پنج گروه رایج را تعیین کنید:

مثال

/* دستگاه‌های بسیار کوچک (تلفن‌های همراه، 600px و پایین‌تر) */
@media only screen and (max-width: 600px) {...}
/* دستگاه‌های کوچک (تبلت‌های عمودی و تلفن‌های همراه بزرگ، 600px و بالاتر) */
@media only screen and (min-width: 600px) {...}
/* دستگاه‌های متوسط (تبلت‌های افقی، 768px و بالاتر) */
@media only screen and (min-width: 768px) {...}
/* دستگاه‌های بزرگ (لپ‌تاپ‌ها و کامپیوترهای رومیزی، 992px و بالاتر) */
@media only screen and (min-width: 992px) {...}
/* دستگاه‌های بزرگ (لپ‌تاپ‌های بزرگ و کامپیوترهای رومیزی، 1200px و بالاتر) */
@media only screen and (min-width: 1200px) {...}

آزمایش کنید

صفحات مرتبط

آموزش:جستجوی رسانه‌های CSS

آموزش:مثال CSS جستجوی رسانه

دستورالعمل مرجع:قانون @media CSS

آموزش:طراحی وب پاسخگو از طریق جستجوی رسانه

دستورالعمل مرجع:مетод window.matchMedia() در جاوااسکریپت