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

شروع موضوع توسط fr_sdgh ‏30 آوریل 2016 در انجمن زبان HTML

  1. fr_sdgh

    fr_sdgh New Member

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

    مدیا کوئری ها...
    کد (Text):

    @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 هست صرف نظر کنم همه چیز درست میشه؛ طرح موبایل فرست میشه.
     
    آخرین ویرایش: ‏30 آوریل 2016
    نوشته شده توسط fr_sdgh در ‏30 آوریل 2016
  2. Graphessional

    Graphessional Active Member

    ارسال‌ها:
    301
    تشکر شده:
    135
    امتیاز دستاورد:
    43
    شما چرا برای media از em استفاده کردی؟
    همه رو پیکسل بده وگرنه این فونت ها هستن که برای اسکرینت تصمیم می گیرن نه عرض مرورگر!
     
    نوشته شده توسط Graphessional در ‏12 نوامبر 2017

به اشتراک بگذارید