مشکل طراحی رسپانسیو بدون فریمورک

fr_sdgh · Apr 30, 2016

طرح، فرست موبایل طراحی شده و مشکل در کوئری داره.
تصویر رو ببنید http://s3.img7.ir/tLloI.jpg
یا کروم مشکل داره یا من !!!! اصلا قابل پذیرش نیست توی رزولوشن 320 ، بیاد min-width من رو بخونه ! اگه 720px هم بجای 45em بگذارم، بازهم همین میشه.

مدیا کوئری ها...

کد:

@media screen and (min-width: 45em) {
    .cards {
        margin-top: -1em;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .card {
        flex: 0 1 calc(50% - .5em);
    }
}

@media screen and (min-width: 62em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: -1em;
    }
    .card {
        flex: 0 1 calc(50% - .5em);
    }
}

@media screen and (min-width: 75em) {
    .cards {
        margin-top: inherit;
    }
    .card {
        flex: 0 1 calc(33% - 1em);
    }
}

الان اگه من از کوئری اولی که 45em هست صرف نظر کنم همه چیز درست میشه؛ طرح موبایل فرست میشه.