break point

استاندارد خاصی نداره و بیشتر تجربیه. شما هر سایزی رو در نظر بگیری باز نمی تونه به قطع بگی گوشی یا تبلتی نیست که اون رو نقض کنه. بهمین خاطر بهتره از سایزهایی که بقیه فریم ورک ها دارن استفاده می کنند ما هم استفاده کنیم. این سایزها برای بوت استرپ 4 هست که من هم تو پروژه هام از همین استفاده می کنم و گاهی هم هست که نیازه برای مورد خاصی برک پوینت خاصی هم تعریف کنم که دیگه اون یه بحث دیگه است و گریزی ازش نیست.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

من هم از همین اندازه هایی که آقای موسوی ذکر کردند پیروی می کنم؛ برای تکمیل سخن هم می تونید به پیوندی که قرار میدم نگاهی بندازید تا اطلاعات بیشتری در خصوص ابعاد دستگاه های مختلف بدست بیارید:
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

@SeyedMH.Mosavi

یک سئوال هم من از شما و دیگران عزیزان می پرسم حالا که بحث ابعاد در طراحی واکنش گرا مطرح شده:
حداقل عرض رو شما چه عددی در نظر می گیرید؟ 320 پیکسل مناسبه؟ یا عدد کمتری رو برای طراحی هاتون در نظر می گیرید؟

و سئوال دوم هم اینکه:
بعضی سایت ها هستند (مثلا دیجی کالا) که میان و چندتا فایل css مجزا درست می کنند واسه اندازه های مختلف دستگاه، فایل css مربوطه استفاده میشه:

 <link rel="stylesheet" href="/static/merged/a6e0b345.css" />
<link rel="stylesheet" href="/static/merged/1c373a65.css" media="screen and (max-height: 1184px)"/>
<link rel="stylesheet" href="/static/merged/94c86141.css" media="screen and (max-width: 1365px)"/>
<link rel="stylesheet" href="/static/merged/1e013cb5.css" media="screen and (min-width: 1025px)"/>
<link rel="stylesheet" href="/static/merged/43d4ffb1.css" media="screen and (min-width: 1366px)"/>
<link rel="stylesheet" href="/static/merged/edd092b8.css" media="screen and (min-width: 1680px)"/>

آیا این روش مزیت خاصی داره نسبت به اینکه ما همه ی کدهامون رو توی یک فایل قرار میدیم؟
و آیا اینجوری کدنویسی کردن، ی مقدار کدنویسی رو سخت تر نمی کنه؟
(من تجربه عملی ندارم، میخواستم نظرات دیگران رو جویا بشم)

@milad
راه جالبی برای جدا کردن کد‌های css هست اما ارسال ۱ درخواست برای ۱ فایل CSS ، زمان کمتری از دریافت ۶ تا فایل می‌بره.

سلام
@milad

به نظر من فایل css اگر واقعا حجم زیادی داره ، 2 تا بشه هر 2 هم به صورت فشرده باشه.
اینطوری در درخواست ها مشکلی پیش نخواهد اومد و در روند لود تاثیر کمتری خواهد داشت.

@milad
بنده خودم هم کوچکترین سایز رو 320 پیکسل در نظر می گیرم چون دیگه سایز صفحه نمایش گوشی هوشمندی کوچیک تر از اون نیست.

اینکار هم مزیت داره هم معایب
یکی از مزیت هاش اینه که کدهای شما خلوت تر و مرتب تر می شه. بخصوص زمانی که پروژه شما بزرگ باشه و تعداد خط کدهای شما زیاد بشه
مزیت دومش هم اینه که اگر کدها درست نوشته شده باشه و هر کدوم به تنهایی بتونند سایت رو کامل نمایش بدند، با جاوا اسکریپ و یه سری فریم ورک های جاوا اسکریپت می تونی فقط بخش مورد نظرت رو فراخونی بکنی و بقیه کدها که نیازت نیست بارگذاری نشند. البته بصورت معمولی و اونطوری که شما گذاشتی همه بارگذاری می شن ولی اعمال نمی شن.
یکی از عیب هاش اینه که تعداد درخواست ها به سمت سرور زیاد می شه. به ازای هر فایل یک درخواست به سمت سرور ارسال می شه و زمانی بیشتر خودش رو نشون می ده که سایت شما بازدیدش بالا باشه

بهترین راهکارش اینه که شما روی سیستم خودتون هرچقدر که کارتون راحت تر می شه فایل های جداگونه بسازید مثلا به ازای هر صفحه یه css جداگونه و یا به ازای هر سایز صفحه نمایش و یا ترکیبی از اینها و در انتها اینها رو merge و minify کنید و اون فایل رو تو سایتتون قرار بدید. برای اینکار هم می تونید از ابزارهایی مثل gulp و webpack و ... استفاده کنید.

اما اینکه چرا دیجی کالا اومده از این روش استفاده کرده حتما دلیل خاصی داشته و من نمی دونم

سلام
اگر برک پوینت ها رو

// Extra small devices (portrait phones, less than 576px)  
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)  
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)  
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)  
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)  
@media (min-width: 1200px) { ... }  

در نظر بگیرم عررض کانتینر های مربوط به هر برک پوینت رو چطور باید بدست بیاریم ایا روش خاصی هست

برای طراحی واکنش‌گرا، حداقل عرض 320 پیکسل معمولاً مناسب است، چرا که با گوشی‌های قدیمی‌تر سازگار است. اما در طراحی‌های جدیدتر، برای نمایش بهتر در دستگاه‌های مدرن، می‌توان از 375 پیکسل هم استفاده کرد.