我的响应式网站在移动设备和其他设备上无法完美扩展

我用bootstrap 3做了一个响应式网站。这是一个带有图片库的投资组合网站。该网站确实可以响应，但是当我将其视为从移动设备或其他设备查看时，它无法完美扩展。当我重新加载页面时，它起初看起来是正确的，但是当它完成加载时，它会发生变化。有人知道我哪里出错了吗？

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;
}

<!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>

使用媒体查询

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

大括号内定义样式

相关内容

最新更新

热门标签：