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

Question

سلام دوستان
میخاستم سایتم برا موبایل ریسپانسیو کنم کسی مسلط هست راهنماییم کنه؟
میخام استاندارد کارم انجام بدم آیا استفاده از مدیا کوری منطقی هست؟
باید برا چه سایزهایی از موبایل و تبلت وقت بزارم چون سایز مبایل زیر 5 اینچ تقریبا دیگه نیست
ممکنه دوستان یک کد نمونه بزارن مثلا برا موبایل 5 اینچ و 6.2 این...

امیرعلی رضائی · Answer

سلام
با مدیا کوئری منطقیه
ببینین یسری سایز استاندارد هست که بر اساس پیکسله.
بر اساس پیکسل ممکنه مثلاً برای 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 می تونه مناسب باشه.

میلاد-م · Answer

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

امیرعلی رضائی · Answer

سلام مجدد.
من از طریق یکی از همین گفتگوها اینارو پیدا کردم.
سایز های طراحی ریسپانسیو بوت استرپ 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) { ... }

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

پاسخ‌ها