Question

我正在为我正在建设的网站提供移动布局，其中移动屏幕的图像必须始终显示为直到它的导航按钮。下面是图像外观的设计模型

我正在使用媒体查询，图像的宽度和margin-top根据模型定位它。但在某些视口中，图像完全出现在屏幕上方，这主要是由于视口不同导致我使用的基于百分比的单位的值不同。我想要表达的一个示例图像：

是否有更好的方法来定位此图像，以便始终显示其导航栏，以便位置在特定视口范围内至少是一致的，如果不是每个视口？

感谢任何帮助。

＆＃13;

.mobile-phone-img {
  display: block;
  margin: 3% auto 0;
  width: 70%;
}

@media screen and (min-width:24em) {
  .mobile-phone-img {
    margin: 2.5% auto 0;
    width: 85%;
  }
}

@media screen and (min-width:25.75em) {
  .mobile-phone-img {
    margin: 11.5% auto 0;
    width: 66%;
  }
}

@media screen and (min-width:30em) {
  .mobile-phone-img {
    margin: 11.5% auto 0;
    width: 60%;
  }
}

@media screen and (min-width:37.5em) {
  .mobile-phone-img {
    margin: 2.5% auto 0;
    width: 65%;
  }
}

@media screen and (min-width:42em) {
  .mobile-phone-img {
    margin: 2.5% auto 0;
    width: 55%;
  }
}

@media screen and (min-width:48em) {
  .mobile-phone-img {
    margin: 2.5% auto 0;
    width: 50%;
  }
}

@media screen and (min-width:50em) {
  .mobile-phone-img {
    margin: 2.5% auto 0;
    width: 45%;
  }
}

@media screen and (min-width:55em) {
  .mobile-phone-img {
    margin: 2.5% auto 0;
    width: 40%;
  }
}

＆＃13;

<div class="mobile-card">
  <h2>
    Tracker
  </h2>
  <a target="_blank" href="https://play.google.com/store/apps/details?id=tracker.gst.in.gsttracker">
    <img src="images/getOnGooglePlay.png" class="mobile-button">
  </a>
  <img src="images/gst-tracker-pixel.png" class="mobile-phone-img">
</div>

＆＃13;

Answer 1

众所周知的媒体查询解决方案几乎适用于所有设备。

 /* 
      ##Device = Desktops
      ##Screen = 1281px to higher resolution desktops
    */

    @media (min-width: 1281px) {

      //CSS

    }

    /* 
      ##Device = Laptops, Desktops
      ##Screen = B/w 1025px to 1280px
    */

    @media (min-width: 1025px) and (max-width: 1280px) {

      //CSS

    }

    /* 
      ##Device = Tablets, Ipads (portrait)
      ##Screen = B/w 768px to 1024px
    */

    @media (min-width: 768px) and (max-width: 1024px) {

      //CSS

    }

    /* 
      ##Device = Tablets, Ipads (landscape)
      ##Screen = B/w 768px to 1024px
    */

    @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

      //CSS

    }

    /* 
      ##Device = Low Resolution Tablets, Mobiles (Landscape)
      ##Screen = B/w 481px to 767px
    */

    @media (min-width: 481px) and (max-width: 767px) {

      //CSS

    }

    /* 
      ##Device = Most of the Smartphones Mobiles (Portrait)
      ##Screen = B/w 320px to 479px
    */

    @media (min-width: 320px) and (max-width: 480px) {

      //CSS

    }

CSS - 对于所有屏幕尺寸，在视口下方渲染10％的图像

1 个答案: