为什么这没有响应？

时间：2018-08-21 15:59:09

标签： responsive-design

我对此布局进行了编码，但是它没有响应。该图像似乎并没有响应。有人可以帮我弄这个吗。 我希望代码对图像做出响应，以便在调整浏览器大小时能够重新调整自身大小。但是，我只能在调整浏览器大小时看到图像对齐，但无法更改大小。我不确定这里发生了什么。似乎我已放置所有代码，但仍然无法正常工作。

 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html {
    font-family: "Lucida Sans", sans-serif;
	
.responsive {
    width: 100%;
    height: auto;
}
	
	
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
	list-style: none;
}
.menu li {
    padding: 2px;
    margin-bottom: -0.5px;
    color: #ffffff;

.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}




/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}




</style>
</head>
<body>



<div class="row">

<div class="col-4 menu">
  <img src="https://via.placeholder.com/300X150" />
</div>

<div class="col-8">
  
  <div class="col-2">
  <img src="https://via.placeholder.com/150X50" class="responsive"/>
  </div>
  
   <div class="col-2">
  <img src="https://via.placeholder.com/150X50" class="responsive"/>
  </div>
  
   <div class="col-2">
  <img src="https://via.placeholder.com/150X50" class="responsive"/>
  </div>
  
   <div class="col-2">
  <img src="https://via.placeholder.com/150X50" class="responsive"/>
  </div>
  
   <div class="col-2">
  <img src="https://via.placeholder.com/150X50" class="responsive"/>
  </div>
  
   <div class="col-2">
  <img src="https://via.placeholder.com/150X50" class="responsive"/>
  </div>
  
</div>
</div>



<div class="col-3">
<div class="col-3 menu">
  <div>
     <ul>
    <li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
    <li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
    <li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
    <li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
	 <li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
	  <li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
  </ul>
  </div>
</div>




<div class="col-3 menu">
  <div>
     <ul>
	  <li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
  </ul>
  </div>
</div>




<div class="col-3 menu">
  <div>
     <ul>
    <li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
  </ul>
  </div>
</div>

<div class="col-3 menu">
  <div>
     <ul>
	  <li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
  </ul>
  </div>
</div>

<div class="col-3 menu">
  <div>
     <ul>
	  <li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
  </ul>
  </div>
</div>

</div>


<div>
 <ul>
<img src="https://via.placeholder.com/305X130" /> <br/>
<img src="https://via.placeholder.com/150X50" />
<img src="https://via.placeholder.com/150X50" /> <br/>
<img src="https://via.placeholder.com/150X50" />
<img src="https://via.placeholder.com/150X50" />
 </ul>
</div>


</body>
</html>

1 个答案:

答案 0 :(得分：0)

您在这里： https://codepen.io/panchroma/pen/EeaoyP

您的CSS中有两个简单的语法错误，我在第20行添加了一个大括号，并在HTML中注释了第28行。

不进行这些更正的情况是，图像没有最大宽度，并且在狭窄的视口中没有缩放比例。

祝你好运！

HTML 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html {
    font-family: "Lucida Sans", sans-serif;
  } /*  added closing bracket */

.responsive {
    width: 100%;
    height: auto;
}


/* }  commented out this bracket */  
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu li {
    padding: 2px;
    margin-bottom: -0.5px;
    color: #ffffff;

.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}




/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}




</style>
</head>
<body>



<div class="row">

<div class="col-4 menu">
  <img src="https://via.placeholder.com/300X150" />
</div>

<div class="col-8">

  <div class="col-2">
  <img src="https://via.placeholder.com/150X50" class="responsive"/>
  </div>

   <div class="col-2">
  <img src="https://via.placeholder.com/150X50" class="responsive"/>
  </div>

   <div class="col-2">
  <img src="https://via.placeholder.com/150X50" class="responsive"/>
  </div>

   <div class="col-2">
  <img src="https://via.placeholder.com/150X50" class="responsive"/>
  </div>

   <div class="col-2">
  <img src="https://via.placeholder.com/150X50" class="responsive"/>
  </div>

   <div class="col-2">
  <img src="https://via.placeholder.com/150X50" class="responsive"/>
  </div>

</div>
</div>



<div class="col-3">
<div class="col-3 menu">
  <div>
     <ul>
    <li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
    <li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
    <li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
    <li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
     <li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
      <li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
  </ul>
  </div>
</div>




<div class="col-3 menu">
  <div>
     <ul>
      <li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
  </ul>
  </div>
</div>




<div class="col-3 menu">
  <div>
     <ul>
    <li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
  </ul>
  </div>
</div>

<div class="col-3 menu">
  <div>
     <ul>
      <li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
  </ul>
  </div>
</div>

<div class="col-3 menu">
  <div>
     <ul>
      <li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
  </ul>
  </div>
</div>

</div>


<div>
 <ul>
<img src="https://via.placeholder.com/305X130" /> <br/>
<img src="https://via.placeholder.com/150X50" />
<img src="https://via.placeholder.com/150X50" /> <br/>
<img src="https://via.placeholder.com/150X50" />
<img src="https://via.placeholder.com/150X50" />
 </ul>
</div>


</body>
</html>
相关问题
最新问题