ریسپانسیو سایت

سلام
با مدیا کوئری منطقیه
ببینین یسری سایز استاندارد هست که بر اساس پیکسله.
بر اساس پیکسل ممکنه مثلاً برای 3 سایز فقط یک مدیا کوئری بزنید.

@media (max-width:pixel) {
.your class name{
styles}
}

@media screen and (max-width: 1400px) {
     .container{
         width: 90%;
     }   
     header nav ul li{
        margin-left: 5px;
    }
    #our-story .story-desc h1{
        margin-top: 100px;
    }
    #our-story .story-desc p{
        width: 90%;
    }
    .menu .menu-desc p{
        width: 90%;
    }
}

طبق تجربه بنده Firefox Developer Edition می تونه مناسب باشه.

این گفتگو رو بخونید:
https://roocket.ir/discuss/11801

سلام مجدد.
من از طریق یکی از همین گفتگوها اینارو پیدا کردم.
سایز های طراحی ریسپانسیو بوت استرپ 4

@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) { ... }

شما میتونید برای ریسپانسیو کردن سایت تون از فریمورک های css مثل bootstrap استفاده کنید که در این صورت واسه هر دیوایسی ریسپانسیو هست و یا اینکه از مدیا کوئری استفاده کنید

ممنونم از دوستان عزیزم خیلی کمکم کردید

سلام این اموزش رو از سایت w3schools مشاهده کنید توضیح کامل داده اما فقط به زبان انگلیسیه
https://www.w3schools.com/css/css_rwd_mediaqueries.asp