Responsive design 为什么这没有反应？_Responsive Design

Responsive design 为什么这没有反应？

responsive-design

Responsive design 为什么这没有反应？,responsive-design,Responsive Design,我对这个布局进行了编码，但它没有响应。图像似乎没有按需要进行响应。有人能帮我吗。我希望代码能够响应图像，随着浏览器大小的调整，它能够重新调整自身大小。但是，我只能看到图像在我重新调整浏览器大小时有点对齐，但它无法更改大小。我不知道这里发生了什么事。好像我已经把所有的代码都放进去了，但还是不起作用 * { 框大小：边框框； } .行：：之后{ 内容：“；明确：两者皆有；显示：块； } [类别*=“列-”]{ 浮动：左；填充：15px； } html{ 字体系列：“Lucida Sans

我对这个布局进行了编码，但它没有响应。图像似乎没有按需要进行响应。有人能帮我吗。我希望代码能够响应图像，随着浏览器大小的调整，它能够重新调整自身大小。但是，我只能看到图像在我重新调整浏览器大小时有点对齐，但它无法更改大小。我不知道这里发生了什么事。好像我已经把所有的代码都放进去了，但还是不起作用


* {
框大小：边框框；
}
.行：：之后{
内容：“；
明确：两者皆有；
显示：块；
}
[类别*=“列-”]{
浮动：左；
填充：15px；
}
html{
字体系列：“Lucida Sans”，无衬线；
.反应迅速{
宽度：100%；
高度：自动；
}
}
.标题{
背景色：#9933cc；
颜色：#ffffff；
填充：15px；
}
.菜单ul{
列表样式类型：无；
保证金：0；
填充：0；
列表样式：无；
}
李先生{
填充：2px；
保证金底部：-0.5px；
颜色：#ffffff；
.中心{
保证金：自动；
宽度：60%；
边框：3px实心#73AD21；
填充：10px；
}
/*对于桌面：*/
.col-1{宽度：8.33%；}
.col-2{宽度：16.66%；}
.col-3{宽度：25%；}
.col-4{宽度：33.33%；}
.col-5{宽度：41.66%；}
.col-6{宽度：50%；}
.col-7{宽度：58.33%；}
.col-8{宽度：66.66%；}
.col-9{宽度：75%；}
.col-10{宽度：83.33%；}
.col-11{宽度：91.66%；}
.col-12{宽度：100%；}
@仅介质屏幕和（最大宽度：768px）{
/*移动电话：*/
[类别*=“列-”]{
宽度：100%；
}
}

给你：

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>


* {
框大小：边框框；
}
.行：：之后{
内容：“；
明确：两者皆有；
显示：块；
}
[类别*=“列-”]{
浮动：左；
填充：15px；
}
html{
字体系列：“Lucida Sans”，无衬线；
}/*增加了结束括号*/
.反应迅速{
宽度：100%；
高度：自动；
}
/*}注释掉了这个括号*/
.标题{
背景色：#9933cc；
颜色：#ffffff；
填充：15px；
}
.菜单ul{
列表样式类型：无；
保证金：0；
填充：0；
列表样式：无；
}
李先生{
填充：2px；
保证金底部：-0.5px；
颜色：#ffffff；
.中心{
保证金：自动；
宽度：60%；
边框：3px实心#73AD21；
填充：10px；
}
/*对于桌面：*/
.col-1{宽度：8.33%；}
.col-2{宽度：16.66%；}
.col-3{宽度：25%；}
.col-4{宽度：33.33%；}
.col-5{宽度：41.66%；}
.col-6{宽度：50%；}
.col-7{宽度：58.33%；}
.col-8{宽度：66.66%；}
.col-9{宽度：75%；}
.col-10{宽度：83.33%；}
.col-11{宽度：91.66%；}
.col-12{宽度：100%；}
@仅介质屏幕和（最大宽度：768px）{
/*移动电话：*/
[类别*=“列-”]{
宽度：100%；
}
}