Question

我创建了一个带有bootstrap 3的响应式网站。它是一个带图片库的投资组合网站。该网站确实具有响应性，但当我从移动设备或其他设备上查看它时，它并不能完美地扩展。当我重新加载页面时，它首先看起来正确，但是当它完成加载时它会发生变化。有没有人知道我哪里出错了？

＆＃13;

body {
  padding: 0;
  border: 0;
  vertical-align: baseline
}

.main {
  margin-top: 170px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 20px;
}

.navbar {
  min-height: 130px;
  margin-bottom: 20px;
}

.navbar-toggle {
  margin-top: 25px;
}

@media (min-width: 768px) {
  .navbar-nav.navbar-right:last-child {
    margin-right: 0;
  }
}

.box {
  padding: 5px;
  margin: 0;
}

.img {
  display: block;
  position: relative;
  margin: 0px;
  z-index: 1;
}

.imgoverlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.img:hover .imgoverlay {
  opacity: 0.75;
}

.text {
  position: absolute;
  bottom: 0;
  padding-bottom: 6px;
  margin: auto auto auto 10px;
}


/*///////////POP UP////////*/

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 2;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 150px auto;
  position: relative;
}

.popup .content {
  max-height: 30%;
  overflow: auto;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title></title>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet">

  <link rel="stylesheet" href="styles/main.css">

</head>

<body>
  <section class="main">
    <div class="container">
      <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 box">
          <a href="#" class="img">
            <img src="" alt="" class="img-responsive">
            <div class="imgoverlay">
              <div class="text"></div>
            </div>
          </a>
        </div>

        <!--///////////// POP UP /////////////////////-->
        <div id="popup1" class="overlay">
          <div class="col-md-12 popup">
            <div class="col-md-6 col-md-offset-1 iframe">
              <iframe src="" frameborder="0" allowfullscreen></iframe>
            </div>
            <div class="col-md-4 content">
              <h2></h2>
              <p class="info"></p>
            </div>
            <a class="col-md-1 close" href="#">&times;</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>

＆＃13;

Answer 1

使用媒体查询

@media (min-width: 576px) { ... }

大括号里面的

定义样式

媒体查询用于定义用于为不同媒体类型/设备定义不同样式的规则。

如果设备屏幕的宽度最小为567px，则它将呈现为已定义的样式。

我的响应式网站在移动设备和其他设备上的扩展性并不理想

1 个答案: