مشکل طراحی رسپانسیو / مدیا کوئری

[Mr.Robot666]

طرح، فرست موبایل طراحی شده و مشکل در کوئری داره.
تصویر رو ببنید 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 هست صرف نظر کنم همه چیز درست میشه؛ طرح موبایل فرست میشه.

[hamedlll]

min-width یعنی حداقلِ عرض یعنی از عرض بزرگتر از 45em کد شما شرو به عمل کردن میکنه.
مثلا media دومی برای عرض های بزرگتر از 62em کدهای media 45em و کدهای خودش رو اجرا میکنه.
پس برای اندازه های کوچکتر از 45em کد های مربوط به اون رو بدون media بالا تر از این mediaها قرار بدین.