امیررضا غیاثی
2 سال پیش توسط امیررضا غیاثی مطرح شد
1 پاسخ

مشکل در اجرا ریسپانسیو

سلام ببخشید این کد ها روی مروگر در حالت ریسپانسیو اجرا میشه ولی توی موبایل ران نمیشه

@media screen and ((min-width: 274px) and (max-width: 304px)) {

    #logoimg {
        width: 0rem;

    }

    .matnr {
        font-size: 1rem;
    }

    #imgbaner1 {
    width: 15rem;
    height: 6.06rem;
    border-radius: 6px;
    }

    #imgbaner2 {
    margin-top: -10.37rem;
    border-radius: 6px;
    width: 7.5rem;
    height: 190px;
}

#imgbaner3 {
    width: 110px;
    height: 190px;
    margin-top: -166px;
    border-radius: 6px ;
}

#twobaner {
    margin: 0px;
    display: flex;
    justify-content: space-around;
}

#div {
    width: 14rem;
    height: 5rem;
}

#hbelog {
    font-size: 1.5rem;
    margin-right: -190px;
    margin-top: 26px;
    color: #000;
    margin-left: 28px;
}

#hurl {
    display: contents;
}

#aurl {
    display: none;
}

#div-1 {
    width: 14rem;
    height: 5rem;
    margin-top: 91px
}

#aurl-1 {
    display: none;
}

#hbelog-1 {
    font-size: 1.5rem;
    margin-right: 44px;
    margin-top: 26px;
    color: #000;
}

#hurl-1 {
    display: contents;
}
}

@media screen and ((min-width: 305px ) and (max-width: 360px)) {
    #logoimg {
        width: 0rem;

    }

    .matnr {
        font-size: 1rem;
    }

    #imgbaner1 {
    width: 18rem;
    height: 6.06rem;
    border-radius: 6px;
    }

    #imgbaner2 {
    margin-left: 17px;
    margin-top: -10.37rem;
    border-radius: 6px;
    width: 8.5rem;
    height: 190px;
}

#imgbaner3 {
    width: 7.87rem;
    height: 190px;
    margin-top: -166px;
    margin-right: 17px;
    border-radius: 6px ;
}

#twobaner {
    margin: 0px;
    display: flex;
    justify-content: space-around;
}

#div {
    width: 15rem;
    height: 5rem;
}

#hbelog {
    font-size: 1.5rem;
    margin-right: -190px;
    margin-top: 26px;
    color: #000;
    margin-left: 31px;
}

#hurl {
    display: contents;
}

#aurl {
    display: none;
}

#div-1 {
    width: 15rem;
    height: 5rem;
    margin-top: 91px

}

#aurl-1 {
    display: none;
}

#hbelog-1 {
    font-size: 1.5rem;
    margin-right: 9px;
    margin-top: 26px;
    color: #000;
}

#hurl-1 {
    display: contents;
}
}

@media screen and ((min-width: 360px) and (max-width: 370px)) {
    #logoimg {
        width: 0rem;

    }

    .matnr {
        font-size: 1rem;
    }

    #imgbaner1 {
    width: 19rem;
    height: 6.06rem;
    border-radius: 6px;
    }

    #imgbaner2 {
    margin-left: 17px;
    margin-top: -10.37rem;
    border-radius: 6px;
    width: 9.5rem;
    height: 190px;
}

#imgbaner3 {
    width: 7.87rem;
    height: 190px;
    margin-top: -166px;
    margin-right: 17px;
    border-radius: 6px ;
}

#twobaner {
    margin: 0px;
    display: flex;
    justify-content: space-around;
}
}

@media screen and ((min-width: 370px) and (max-width: 390px)) {
    #logoimg {
        width: 0rem;

    }

    .matnr {
        font-size: 1.3rem;
    }

        #imgbaner1 {
    width: 20rem;
    height: 6.06rem;
    border-radius: 6px;
    }

    #imgbaner2 {
    margin-left: 17px;
    margin-top: -10.37rem;
    border-radius: 6px;
    width: 9.5rem;
    height: 190px;
}

#imgbaner3 {
    width: 8.87rem;
    height: 190px;
    margin-top: -166px;
    margin-right: 17px;
    border-radius: 6px ;
}

#twobaner {
    margin: 0px;
    display: flex;
    justify-content: space-around;
}
}

@media screen and ((min-width: 390px) and (max-width: 400px)) {
    #logoimg {
        width: 0rem;

    }

    .matnr {
        font-size: 1.3rem;
    }

        #imgbaner1 {
    width: 21rem;
    height: 6.06rem;
    border-radius: 6px;
    }

    #imgbaner2 {
    margin-left: 17px;
    margin-top: -10.37rem;
    border-radius: 6px;
    width: 10.5rem;
    height: 190px;
}

#imgbaner3 {
    width: 8.87rem;
    height: 190px;
    margin-top: -166px;
    margin-right: 17px;
    border-radius: 6px ;
}

#twobaner {
    margin: 0px;
    display: flex;
    justify-content: space-around;
}
}

@media screen and ((min-width: 400px) and (max-width: 410px)) {
    #logoimg {
        width: 0rem;

    }

    .matnr {
        font-size: 1.3rem;
    }

        #imgbaner1 {
    width: 22rem;
    height: 6.06rem;
    border-radius: 6px;
    }

    #imgbaner2 {
    margin-left: 17px;
    margin-top: -10.37rem;
    border-radius: 6px;
    width: 11.5rem;
    height: 190px;
}

#imgbaner3 {
    width: 8.87rem;
    height: 190px;
    margin-top: -166px;
    margin-right: 17px;
    border-radius: 6px ;
}

#twobaner {
    margin: 0px;
    display: flex;
    justify-content: space-around;
}
}

@media screen and ((min-width: 410px) and (max-width: 420px)) {
    #logoimg {
        width: 0rem;

    }

    .matnr {
        font-size: 1.3rem;
    }

        #imgbaner1 {
    width: 23rem;
    height: 6.06rem;
    border-radius: 6px;
    }

    #imgbaner2 {
    margin-left: 17px;
    margin-top: -10.37rem;
    border-radius: 6px;
    width: 11.5rem;
    height: 190px;
}

#imgbaner3 {
    width: 9.87rem;
    height: 190px;
    margin-top: -166px;
    margin-right: 17px;
    border-radius: 6px ;
}

#twobaner {
    margin: 0px;
    display: flex;
    justify-content: space-around;
}
}

@media screen and ((min-width: 420px) and (max-width: 430px)) {
    #logoimg {
        width: 0rem;

    }

    .matnr {
        font-size: 1.3rem;
    }

        #imgbaner1 {
    width: 23rem;
    height: 6.06rem;
    border-radius: 6px;
    }

    #imgbaner2 {
    margin-left: 17px;
    margin-top: -10.37rem;
    border-radius: 6px;
    width: 11.5rem;
    height: 190px;
}

#imgbaner3 {
    width: 9.87rem;
    height: 190px;
    margin-top: -166px;
    margin-right: 17px;
    border-radius: 6px ;
}

#twobaner {
    margin: 0px;
    display: flex;
    justify-content: space-around;
} 
}

ثبت پرسش جدید
mahdi
@www.mamali1383 2 سال پیش مطرح شد
1

سلام خوبی به این صورت بنویس

@media screen and (max-width: 900px) and (min-width: 500px) {
 .box {
    font-size: 50px;
    padding: 50px;
  }
}

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام