Question

我正在构建一个应用程序演示网站，目前正在向该网站添加一些屏幕截图，但这些屏幕截图无法正确显示在设备上。

我认为CSS中需要更改某些内容，但是我不确定该怎么做。我主要是移动应用程序开发人员，对Web开发不是很熟悉。

这是网站的网址：nishnocu.com

如果您需要更多信息，请告诉我。

.device-container.iphone-space-grey {
  background: url('../../img/devices/iphone/6sg.png') no-repeat center top;
  background-size: contain;
}

.device-container.iphone-silver {
  background: url('../../img/devices/iphone/6s.png') no-repeat center top;
  background-size: contain;
}

.device-container.iphone-gold {
  background: url('../../img/devices/iphone/6g.png') no-repeat center top;
  background-size: contain;
}

.device-container.i6 .device-container-inner {
  width: 294px;
  top: 81px;
  left: 28px;
}

@media (max-width: 1199px) {
  .device-container.i6 .device-container-inner {
    width: 249px;
    top: 68px;
    left: 18px;
  }
}

@media (max-width: 991px) {
  .device-container.i6 .device-container-inner {
    width: 206px;
    top: 58px;
    left: 62px;
  }
}

@media (max-width: 767px) {
  .device-container.i6 .device-container-inner {
    width: 100%;
    top: 0;
    left: 0;
  }
}

.device-container.i6 .owl-theme .owl-controls {
  margin-top: 100px;
}

<!--/Visible on XS SM-->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
  <!--Device Container-->
  <div class="device-container i6 iphone-silver">
    <div class="device-container-inner">
      <div id="app-showcase" class="owl-carousel owl-theme">
        <div class="item">
          <img src="img/cover/screenshot-1.png" class="img-responsive" alt="Iphone Application 1" />
        </div>
        <div class="item">
          <img src="img/cover/screenshot-2.png" class="img-responsive" alt="Iphone Application 2" />
        </div>
        <div class="item">
          <img src="img/cover/screenshot-3.png" class="img-responsive" alt="Iphone Application 3" />
        </div>
      </div>
    </div>
  </div>
  <!--/Device Container-->
</div>

Answer 1

在使用内置轮播和其他库进行开发时，需要借助媒体查询手动进行处理。只需隐藏轮播的点，但将其属性设置为false并使用下面的代码，它将适合移动图像。

对于> 992px，添加“边框半径：4px；高度：438px；宽度：247px；”在“ .owl-carousel .owl-wrapper-outer”中，对于<992px至> 767px，添加“ border-radius：4px; height：364px; width：206px;”在“ .owl-carousel .owl-wrapper-outer”中，对于<768px，您尚未添加移动图像。

屏幕截图未放置在移动设备上

1 个答案: