Question

我一直在编程很长的网格系统，在这里我使用了html5 <picture>标签。当设备为< 650px时，应加载picture 1和> 650 picture 2。我正在使用最小化chrome浏览器进行测试。

后备图片是test picture。

我现在在iPhone上对此进行测试，并且可以看到每次都加载了后备图片。所以现在我很着急，因为我花了3天的时间来制作此网格，而且看起来制作网格的主要目的似乎不起作用。

有人知道为什么它不起作用吗？（我切掉了很多代码，没有涉及这个问题。但是我发布了我正在使用的所有CSS）。

#front .row {
    padding-bottom: 0px!important;
  }
  body {
    background-color: #f5f5f5;
  }

  /* Set width between grid elements */
  
  .small-padding.top {
    padding-top: 10px;
  }
  
  .small-padding.bottom {
    padding-bottom: 10px;
  }
  
  .small-padding.left {
    padding-left: 5px;
  }
  
  .small-padding.right {
    padding-right: 5px;
  }
  
  .margin_bottom {
    margin-bottom: 10px;
  }
  
  .row [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
  }
  
  .row {
    margin-left: -5px;
    margin-right: -5px;
  }
  
  .img-responsive {
    height: 100%;
  }
  
  /* Position of buttons/text in a single grid element */
  
  .inner-wrapper {
    background: none;
  }
  
  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
  }
  
  .bottom-left {
    position: absolute;
    bottom: 2%;
    left: 6%;
  }
/* Position text on full width banner */
  .header-container {
    color: white;
    margin: 0 5%;
  }
  .banner-text {
    position: absolute;
    bottom: 16%;
    left: 6%;
  }
  
  /* Color on text */
  
  .dark-font {
    color: #333;
  }
  
  .light-font {
    color: #fff;
  }
   
  /* Set full width on columns */
  
  @media (max-width: 768px) {
    .img-responsive {
      width: 100%;
      height: auto;
    }
    /* Maybe delete btn-success: */
    .btn-success {
      width: fit-content;
    }
  }
  
  @media (max-width: 991px) {
    h3 {
      font-size: 1.2em;
    }
  }
  .image-overlay {
    position:relative;
  }
  .overlay {
    position:absolute;
    transition:all .3s ease;
    opacity:0;
    transition:1.9s;
    background: #00b1bab8;
  }
  .image-overlay:hover .overlay {
    opacity:1;
  }
  .overlayFade {
    background: rgba(27, 27, 27, 0.5);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

<!DOCTYPE html>
<html lang="en">

<head>
  <title>FINAL WORKING</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
      <div class="row">
          <div class="col-xs-12 col-sm-12 margin_bottom">
              <div class="image-overlay">
                  <a href="#">
                      <picture>
                          <div class="overlay overlayFade"></div>
                          <source media="(min-width: 650px)" srcset="http://vouzalis.dk/1024.jpg"></source>
                          <source media="(min-width: 380px)" srcset="http://vouzalis.dk/380.jpg"></source>
                          <img src="http://r.ddmcdn.com/w_830/s_f/o_1/cx_98/cy_0/cw_640/ch_360/APL/uploads/2015/07/cecil-AP463227356214-1000x400.jpg" alt="John Doe" style="width:100%;"></img>
                      </picture>
                      <div class="inner-wrapper banner-text">
                          <div class="header-container">
                              <h2 class="light-font">Here is headline 1</h2>
                              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                 tempor incididunt ut labore et dolore magna aliqua.</p>
                              <span class="btn btn-primary" role="button">Our Services</span>
                          </div>
                      </div>
                  </a>
              </div>
          </div>
      </div>
  </div>
</body>
</html>

html5图片标签在移动设备上不起作用

0 个答案: