CSS media Query отображает неверный размер - PullRequest
Новая
       35

CSS media Query отображает неверный размер

0 голосов
/ 20 марта 2019

Все

Я использую @media Query для отображения изображений разного размера для разных изображений iPhone, я сталкиваюсь со странной проблемой. Когда у меня 8 устройств плюс, выполняется запрос 8 устройств, я попытался удалитьизображения для тестирования.Ниже приведен код.

/* ----------- iPhone 6, 6S, 7 and 8 plus ----------- */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {
    .container {
  position: absolute;
  padding: 16px;
  right: 10%;
  left: 10%;
  top: 50%;
}
.login-bg-img {
  background-image: url("login_iPhone_plus.png");
  height:100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  }
 
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    .container {
  position: absolute;
  padding: 16px;
  right: 10%;
  left: 10%;
  top: 50%;
}
.login-bg-img {
  background-image: url("login_iPhone_6.png");
    height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}
}
...