Question

我正在尝试使用光滑的Carousel用于使用Foundation 6的大型移动版网站。我按照网站上的指示进行操作，但似乎当我将屏幕分辨率缩小到较小时（移动）分辨率图像被迫缩小到180px。所需的效果是滑块自动调整大小到视口的全宽。

我在网页上有三个使用媒体查询换出的光滑轮播。我的手机版

我的HTML标记就像

一样简单

<!-- Mobile Resolution -->
<div class="slider mobile_screen">
  <!-- Slide 1 -->
  <div class="design_services">
     <img src="http://www.advancedlitho.com/img/custom_images/mobile_slide_test.jpg" />
  </div>
  <!-- Slide 2 -->
  <div class="customer_service">
     <img src="http://www.advancedlitho.com/img/custom_images/mobile_slide_test.jpg" />
  </div>
  <!-- Slide 3 -->
  <div class="design_online">
     <img src="http://www.advancedlitho.com/img/custom_images/mobile_slide_test.jpg" />
  </div>
</div>

以下是测试服务器上网站的链接 - http://nuspaservices.com/mobile_test/

我遇到很多麻烦。所以任何帮助将不胜感激。

谢谢！

Answer 1

我认为它应该看起来像平板电脑/手机形式的this ..它至少缺少logo.css和logo.png，它看起来就像完整尺寸的网站。

话虽这么说，也许您可以使用自定义媒体查询来解决基于分辨率的问题。

@media (max-width:499px){
  .yourSelector{
    width:100%;
  }
}

光滑的轮播 - 滑块图像对移动分辨率的影响太大了

1 个答案: