نقاط شکست در CSS
مدیا کوئری یاد داد @media چطور روشن می‌شود. تصویر واکنش‌گرا گفت عکس چطور داخل همان slot جا می‌گیرد. نقطهٔ شکست همان برنامه است: چند عرض کوتاه که در آن‌ها استراتژی چیدمان عوض می‌شود — ستون، منو، فاصله — یک‌بار نام می‌گذارید و همه‌جا همان را تکرار می‌کنید تا سایت هم‌قدم حرکت کند.
جعبهٔ ابزار نقطهٔ شکست
📊 نقطهٔ شکست یک‌نگاه
| قطعه | کار روزمره |
|---|---|
| نقطهٔ شکست | عرضی برنامه‌ریزی‌شده که قانون چیدمان عوض می‌شود |
| انتخاب بر اساس محتوا | جایی که طراحی تنگ یا خلوت می‌شود — نه مدل گوشی |
گام نام‌دار (sm، md، lg…) |
همان توکن همه‌جا؛ بازبینی و کار تیمی ساده‌تر |
| نردبان موبایل‌اول | پایه = باریک؛ min-width قابلیت اضافه می‌کند |
| سیال بین گام‌ها | %، rem، Flex/Grid قبل از کوئری تازه |
| فهرست مستند | یک لیست کوتاه در کامنت یا توکن — نه بیست عدد پراکنده |
نقطهٔ شکست یعنی «آیفون» نیست. یعنی «وقتی سایدبار کنار مقاله جا نمی‌شود» یا «وقتی منو می‌تواند ردیف شود». محتوا را ببینید؛ بعد یک گام مشترک بنویسید.
اول محتوا — نه کاتالوگ دستگاه
پنجره را بکشید تا چیزی بشکند: سطر خیلی بلند، کارت له، همبرگر وقتی هنوز جا هست. همان عرض را با rem (یا em) یادداشت کنید. این نامزد بهتر از کپی جدول پیکسل گوشی‌هاست.
/* Break when article + sidebar need two columns (~48rem content width) */
@media (min-width: 48rem) {
.layout {
display: grid;
grid-template-columns: 1fr 16rem;
gap: 1.5rem;
}
}
فهرست دستگاه‌به‌دستگاه زود کهنه می‌شود — هر سال گوشی تازه می‌آید. چند گام بر اساس محتوا بیشتر دوام می‌آورد و stylesheet خواناتر می‌ماند.
گام‌ها را نام بگذارید — همان عرض را دوباره استفاده کنید
برای سایت معمول دو تا چهار گام کافی است. در کامنت (یا با custom property برای مقدار عرض) اسم کوتاه بگذارید. هر کامپوننتی که «چیدمان عریض» را شروع می‌کند باید همان عدد را بگیرد — نه 720px در هدر و 768px در grid.
:root {
--bp-md: 40rem;
--bp-lg: 64rem;
}
/* Usage still needs a literal in @media in classic CSS —
keep tokens and queries in sync, or use a preprocessor/build step. */
@media (min-width: 40rem) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 64rem) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
در CSS کلاسیک، @media همه‌جا نمی‌تواند مثل یک متغیر ساده از custom property به‌عنوان شرط بخواند — پس توکن‌های :root بیشتر مستندسازی و کمک toolingاند؛ literalهای هم‌خوان را هم‌قدم نگه دارید. عادت مهم: یک نردبان مشترک، نه عرض تصادفی در هر فایل.
نردبان موبایل‌اول
پیش‌فرض باریک را بدون کوئری بنویسید. هر گام min-width ستون، تایپ بزرگ‌تر، یا منوی افقی اضافه می‌کند. کل صفحه را در هر گام از نو ننویسید — یک لایهٔ روشن را عوض کنید.
.nav {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 40rem) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 64rem) {
.nav {
flex-direction: row;
align-items: center;
gap: 1.5rem;
}
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
تنگ کردن دسکتاپ‌اول (وقتی از عریض شروع می‌کنید)
اگر پروژه از قبل layout عریض دارد، کوئری max-width می‌تواند ستون را روی صفحهٔ کوچک جمع کند. یکدست بمانید: برای یک کامپوننت بی‌دلیل min-width و max-width را قاطی نکنید.
.sidebar {
width: 18rem;
float: left;
margin-right: 1.5rem;
}
@media (max-width: 39.99rem) {
.sidebar {
float: none;
width: auto;
margin-right: 0;
}
}
ترجیح این است هر پروژه یک جهت داشته باشد. درس Media Queries نحو min-width و max-width را گفت — اینجا قانون استراتژی است: گام مشترک، همان فلسفه همه‌جا.
یک گام، چند کامپوننت
وقتی --bp-lg (یا 64rem) روشن شد، اگر منو و grid و فاصله مال یک فصل چیدمان‌اند، با هم عوضشان کنید. عرض‌های «تقریباً یکی» باگ می‌سازند: هدر زودتر از grid اصلی می‌پرد.
@media (min-width: 64rem) {
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.main {
display: grid;
grid-template-columns: minmax(0, 1fr) 18rem;
gap: 2rem;
}
}
اول سیال — بعد کوئری
بین نقاط شکست، Flex و Grid و % و rem باید تغییر عرض کوچک را تحمل کنند. کوئری تازه فقط وقتی ساختار باید عوض شود (تعداد ستون، الگوی منو). کوئری بیشتر = حرفه‌ای‌تر نیست.
خودتان امتحان کنید
- یک صفحهٔ تمرینی را resize کنید و دو عرضی را بنویسید که واقعاً چیدمان باید عوض شود.
- همان عرض‌ها را به
remتبدیل کنید و نام بگذارید (md،lg). - همان دو
min-widthرا هم روی grid کارت و هم روی منو بگذارید. - در CSS بگردید دنبال عددهای دیگر
min-width/max-width— نزدیک‌ها را یکی کنید. - با بهتر کردن پایهٔ سیال (gap،
minmax، wrap) یک کوئری اضافه را حذف کنید.
اشتباه‌های رایج
- کاتالوگ عرض هر گوشی به‌جای نقاط درد محتوا
- دوازده کوئری روی‌هم با پیکسل‌های کمی فرق
- هدر در
768px، main در800px، فوتر در720px - رد کردن CSS سیال و حل هر تکان با یک
@mediaتازه - دوباره درس دادن آکولاد
@mediaیاsrcsetاینجا به‌جای برنامه‌ریزی نردبان
جمع‌بندی
- نقطهٔ شکست = گام برنامه‌ریزی‌شدهٔ چیدمان — چند تا نام بگذارید و تکرار کنید
- عرض را از فشار محتوا بگیرید، نه از جدول بازاریابی دستگاه
- نردبان
min-widthموبایل‌اول را ترجیح دهید؛ هر پروژه یک جهت - بین گام‌ها سیال بمانید؛ کوئری فقط برای تغییر ساختاری
- این پایان ماژول Responsive است — بعد: Box Shadow در Effects & Motion
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود