如何使本網站完全響應？

Question

自一個月以來，我一直在筆記本電腦上建立一個網站，該網站在我的機器（15英寸屏幕）上看起來都很好看，但當我在不同的機器（17英寸和13英寸）上運行時，一切都是偶然的。我已經使用了引導程序，我的網站在一定程度上做出了響應，但是還沒有完全響應。

由於我不完全了解該網站的哪些部分並對“無響應”負責，因此，我將在此處發布整個代碼。

HTML：

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="main.css"></link>
<link rel="stylesheet" href="css/navbar.css">

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>

<title>Big Data for your city!</title>
</head>

<body>
 <header>  
  <div class="navbar navbar-default navbar-fixed-top">
   <div class="container">
    <div class = "navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" rel="home" href="#" title="Explore around">
    <img style="max-width:150px; margin-top: -7px;"
         src="Images/logo.png">
</a>
    </div>
    <div class="collapse navbar-collapse" id="collapse">        
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">SIGN UP</a></li>
      <li><a href="#">LOG IN</a></li>
      <li><a href="about.html">ABOUT</a></li>
    </ul>
    </div>
  </div>
</div>
</header>
<div class="jumbotron">
  <div class="container-fluid">
    <h1><center>Find amazing places near your city.</center></h1>
    <p>Places you could travel to and explore in a weekend.</p>
    <a class = "explore-anc" href="#Cities"><button id  "exlpore-button" class="btn sm explore">Explore</button></a>
    <p>OR</p>
    <div class = "seach-area">
     <form id="searchBox" action="/search" style="display:inline;" method="get">
        <center><input id="text-enter" name="q" size="80" type="text" placeholder="Enter a place "/>
        <input id="search-button" value="Search" type="submit"/></center>
     </form>
    </div>
  </div>
</div> 
<div class="learn-more" id ="learn">
  <div class="container">
    <div class = "row">
      <div class = "col-md-4">
        <h3><a href="#Cities">Cities with service</a></h3>
        <p>Find all the cities here!</p>
      </div>
      <div class = "col-md-4">
        <h3><a href="#analytics">Analyze</a></h3>
        <p>Big data analyics</p>
      </div>

      <div class = "col-md-4">
        <h3><a href = "value.html">Vlue</a></h3>
        <p>Add value to all your stuff here!</p>
      </div>
    </div>
  </div>
</div>
<div id = "Cities" class = "neighborhood-guides">
<div class = "container">
    <h2>Cities:</h2>
    <p>Start exploring places around your city</p>
    <div class = "row">
              <div class = "col-md-4">
                <div class = "thumbnail" ng-click = "city  NY">
                    <image src = "Images/NY.jpg"/>
                </div>
                 <div class = "thumbnail" ng-click = "city  mum">
                    <image src = "Images/Mum.jpg"/>
                </div>
              </div>
              <div class = "col-md-4">
              <div class = "thumbnail" ng-click = "city  SF">
                    <image src = "Images/SF.jpg"/>
                </div>
              <div class = "thumbnail" ng-click = "city  LA">
                    <image src = "Images/LA.jpg"/>
                </div>
              </div>
              <div class = "col-md-4">
              <div class =  "thumbnail" ng-click = "city  del">
                    <image src = "Images/Del.jpg"/>
                </div>
              <div class = "thumbnail" ng-click = "city  MA">
                    <image src = "Images/MA.jpg"/>
                </div>
              </div>
    </div>
    </div>
</div>
<div id = "analytics" class = "analytics">
    <div class = "container">
     <div>
        <h2><center>Plan better with data</center></h2>
        <p>Data is constantly churned, filtered and updated. Forget numbers, use graphs and make your every trip a perfect one</p>
     </div>
     <div class="row">
        <div class="col-md-6">
            <img src="Images/india-home.png" />
        </div>
        <div class="col-md-6">
         <ul type = "">
            <li>Weather patterns, rainfall graphs on every city.</li>
            <li>Popularity pattern, interest rate graphs on each and every place</li>
            <li>The size of the circle in this map represents the number of places covered in that city</li>                
            <li>Go to your city and find analytics there. Also, each place get its own graphs</li>
         </ul>
        </div>
    </div>
    </div>
    </div>
</body>
</html>

CSS：導航欄：

html, body{height: 100%;min-height:100%;}


header .navbar {
  padding-left: 0px;
  padding-right: 0px;
  padding-top:30px;
  transition: all .5s ease-out;
}
header .navbar-brand {
  background-repeat: no-repeat;
  background-position: 15px 0;
  height: auto;
}
header .navbar-default {
  background-color: transparent;
  border:none !important;
}

header .navbar-default .navbar-nav li {
  color: white;
  font-size: 22px;
  padding: 5px 8px;
  font-weight: 700;
}

header .navbar-default .navbar-nav a {
  color: white;
  font-size: 14px;
  padding: 5px 8px;
  border-radius: 20px;
}

header .navbar-default .navbar-nav a:active {
  color: white;
  font-size: 14px;
  padding: 5px 8px;
  border-radius: 20px;
}
/**  Navbar Brand **/

header .navbar-brand {
    margin-left:0px;
    padding: 0px;   
}



/*Navbar toggle*/

header .navbar-toggle {
  background-color: #279182;
}

header .navbar-default .navbar-toggle .icon-bar {
  background-color: white;
}

@media only screen
and (max-width: 768px) {
  header .navbar-collapse.in {
    background-color: rgba(0,0,0, .5);
  }
}
/*Links Navbar*/
header .navbar-default .navbar-nav a:hover {
  color: rgba(0,0,0,0.5);
  background-color: white;
  border: 2px solid white; 
}
header .navbar-default .navbar-nav a:focus{
   color: white; 
}
header .navbar-default .navbar-nav a:hover {
  color: rgba(0,0,0,0.5);
  background-color: white;
  border: 2px solid white; 
}

主要CSS：

.jumbotron {
  position: relative;
  background-image:url('Images/B.jpg');
  width: 100%;
  min-height: 100%;
  background-repeat: no-repeat;
 -webkit-background-size: cover;
 -moz-background-size: cover;
  background-size: cover;
  margin-bottom:0px;
}

.jumbotron .container-fluid {
  position: relative;
  top:105px;
}

.jumbotron h1 {
  color: #fff;
  font-size: 60px;  
  font-family: Arial;
  font-weight: 700;
  opacity:1;
}

 .jumbotron p {
   font-size: 20px;
   color: #fff;
   text-align:center;
   font-weight: 700;
   opacity:1;
   padding-top:10px;
 }

.jumbotron a {
  text-decoration: none;
  width:15%;
 } 
.search-area{
    display:block;
    padding-top: 100px;
    margin-top: 100px;
 }

#search-button {  
   background:transparent;  
   color:white;
   font: 'trebuchet ms', trebuchet;
   padding:13px 25px;
   border-radius:0 9px 9px 0;
   -moz-border-radius:0 9px 9px 0;
   -webkit-border-radius:0 9px 9px 0;
   -o-border-radius:0 10px 10px 0;
   border:2px solid white;
   font-weight:bold;
   margin-left:-4px;
 }

#search-button:hover{
 background-color: #5CDEBD;
 border: 2px solid #5CDEBD;
}

#text-enter {
background: white;
padding:15px;
 border-radius:10px 0 0 10px;
 -moz-border-radius:10px 0 0 10px;
 -webkit-border-radius:10px 0 0 10px;
  -o-border-radius:10px 0 0 10px;
  border:0 none;
  width:30%;
 }

/*Learn*/

.learn-more {
  padding: 30px;
  background-color: #8715CE;
  color: white;
  font-weight: 500;
  font-size: 17px;
 }

.learn-more h3 {
  padding-top:30px;
  padding-bottom:30px;
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: 800;
}

.learn-more a {
  color: white;
  padding:10px;
  border: 2px solid white;
}
.learn-more a:hover {
  background-color:white;
  color: rgba(0,0,0, 0.5);
  text-decoration:none;
}

/*neighborhood*/

.neighborhood-guides{
    background-color: #efefef;    
    border-bottom: 1px solid #DBDBDB;
    min-height: 100%;
    box-shadow: none;

}

.neighborhood-guides .row .thumbnail{
    box-shadow: none;
    background-color:black;
}

.neighborhood-guides .row .thumbnail  img:hover {
    background-color: #000;
    opacity: 0.6;
}

.neighborhood-guides .container{
    padding-top:25px;
}

.neighborhood-guides .container .row{
    padding-top:30px;
} 
.neighborhood-guides h2{
    padding-top:50px;
    font-weight:800;
    color: #393c3d;
    font-size: 48px;
}
.neighborhood-guides p{
    margin-bottom:13px;
    font-size: 20px;
}
.analytics
{
    background-color: #15CE68;    
    min-height: 130%;
    color:white;
}

.analytics ul li{
    list-style: none;
    padding-top: 60px;
    font-size: 20px;
    font-weight: 700;
}

.analytics h2{
    font-weight: 900;
    padding-top:6%;
    font-size: 48px;
}
.analytics .container p{
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    font-size: 20px;
}

.analytics img{
max-height: 600px;
}

如果有人可以幫助我，我將非常感激，這已經使我負擔了一個星期。

Answer 1

您可能會發現一些有用的信息

刪除第二個jQuery鏈接。 您已經從Google CDN獲取jQuery
刪除圖像的最小高度 ，或使用百分比代替固定的像素值
網站的整體布局樣式始終比固定像素長度更好地使用百分比
請勿將同一元素的百分比值和像素值混為一談，除非不可避免

如何使本網站完全響應？

問題描述

1 個解決方案

解決方案1
0 已采納 2015-10-29 01:04:40

如何使本網站完全響應？

問題描述

1 個解決方案

解決方案1 0 已采納 2015-10-29 01:04:40

解決方案1
0 已采納 2015-10-29 01:04:40