Question

这是我的第一个严重的大问题，我无法通过谷歌搜索来解决（即使要花一整天的时间才能解决问题，我也正在这样做）。正如本主题中已提到的那样，看起来CSS尚未加载到移动设备上，但在台式机（localhost XAMPP）上运行良好。当我在桌面上使用该项目时，如我所设置的那样，光滑滑块上的所有按钮看起来都正确。当我在移动设备上的实时服务器上查看页面时，使用滑块的按钮看起来像默认按钮（实际上，它们很小，并且在滑块之外，即使很难单击也从视觉上是不可接受的）。 / p>

头部已经具有用于移动设备的元数据，并且已经为移动设备设置了@import url（）（但未做任何更改）：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css" media="all">@import url("slick/slick.css");</style>
  <style type="text/css" media="all">@import url("slick/slick-theme.css");</style>
  <link rel="stylesheet" type="text/css" href="$cssAddress">
  <title>$titleText</title> 
</head>

html的滑块部分：

<div class="slickSlider">
  <div><img src="productImg/BK1.jpg" alt="First Slide" width="100%"></div>
  <div><img src="productImg/BK2.jpg" alt="Second Slide" width="100%"></div>
  <div><img src="productImg/BK3.jpg" alt="Third Slide" width="100%"></div>
</div>

所有脚本都在体内

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
    <script>
      $(document).ready(function(){
        $('.slickSlider').slick({
          dots: true,
          swipeToSlide: true,
          dotsClass: 'slick-dots',
          prevArrow: "<img class='a-left control-c prev slick-prev' src='img/arrowLeft.png'>",
          nextArrow: "<img class='a-right control-c next slick-next' src='img/arrowRight.png'>"
        });
      });
    </script>
<script src='js/product_page.js'></script>
<script src='js/burger.js'></script>

到目前为止，我已经尝试了很多不同的轮播（例如bootstrap 4轮播），其中一个也可以在desktop（）上正常工作，也可以自己创建一个，但是我放弃了在移动设备上实现刷卡操作。

我还尝试在移动媒体查询中实现CSS，但是没有任何明显的结果。

@media screen and (max-width: 768px) {
  .slick-prev {
    left: 100px;
    background: red; /*to notice it, is white*/
}
.slick-next {
    right: 100px;
    background: red; /*to notice it, is white*/
}
}

我还提供了一个指向我当前正在工作的网站的链接，因为这可能会提供一个线索：请不要怪我的整个外观，因为它仅是为达到良好的开发目的而设计的，而不是最终产品，并且仅部分地针对台式机而设计。我主要从事网站功能（PHP和SQL）的工作。

PS。 Slider位于导航中的针织物下方，然后您需要选择第一个可用的产品才能进入product_page.php

ManhattanStyleBoutique

感谢您阅读文章，希望我现在已经有将近2周的时间为我的网站带来了一些问题。为我的英语语法道歉。

亲切的问候

拍子

CSS在移动设备上的工作方式与台式机不同

0 个答案: