Question

当我缩小屏幕尺寸时，我想知道如何让4个图标成为两行2个图标。当我在较小的屏幕上测试时，颜色渐变也会重新开始。我还是一个初学者，所以我在这方面很陌生，并没有真正找到它，所以我非常感谢你的帮助。在此先感谢：

我的代码就像这样atm：

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Fjalla+One);

html{
  height: 100%;
}

body{
  font-family: 'Fjalla One', sans-serif;
  background: #2C3E50;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to top, #4CA1AF, #2C3E50);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #4CA1AF, #2C3E50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


}

.container{
  margin: auto;
}


h1{
  text-transform: uppercase;
  font-size: 60px;
  line-height: 47px;
  letter-spacing: 2px;
  text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px;
  text-align: center;
  line-height: 60px;
}


.title{
  transform: translateX(-50%) rotate(-5deg);
  display: block;
  margin-left:50%;
}











.icon{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
  display: table-cell;
  vertical-align: middle;
  color: white;
  border-radius: 35px;
  width: 180px;
  height: 180px;
  text-align: center;
  /*background: #007991;  /* fallback for old browsers */
  /*background: -webkit-linear-gradient(to bottom, #78ffd6, #007991);  /* Chrome 10-25, Safari 5.1-6 */
  /*background: linear-gradient(to bottom, #78ffd6, #007991); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.icon:hover, .icon:focus, .icon:active {
  box-shadow: 0 50px 50px -50px rgba(0, 0, 0, 50);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}



.icontext{
  text-align: center;
  color: white;
  font-size: 30px;
}



table {
    border-spacing: 60px;
    border-collapse: separate;
}








.contactbtn{
  margin-right: 15px;
  color: white;
  border: 2px solid black;
  border-radius: 35px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 12px 40px 0 rgba(0, 0, 0, 0.19);
  width: 300px;
  height: 50px;
  text-align: center;
  justify-content: center;

  background: #007991;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #78ffd6, #007991);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #78ffd6, #007991); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

＆＃13;

<!DOCTYPE html>
<html style="display: block;">
<head>
  <meta charset="UTF-8">
  <title>Knowledge base</title>
  <href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="style.css">
      <script src="script.js" charset="utf-8"></script>

</head>

<body>
  <!--Titel-->
  <section class="container">
  <h1>
    <br />
    <span class="title" >
       <label style="color:#e55643;">Burger</label><label style="color:#2b9f5e;">school</label>
    </span>
    <span class="title" style="color:#f1c83c;">afspraken</span>
  </h1>
</section>

<!--Icoontjes-->
<table align="center">
  <tr>
    <h1>
    <td><a href="afspraken.html"><img src="https://www.icloud.com/system/cloudos/17BHotfix5/cloudos_foundation/17BHotfix5/en-us/source/resources/images/app_icons/reminders_icon@2x.png" alt="" class="icon" style="height: 182px; width: 182px;"></a></td>
    <td><img src="https://www.icloud.com/system/cloudos/17BHotfix5/cloudos_foundation/17BHotfix5/en-us/source/resources/images/app_icons/fmf_icon@2x.png" alt="" class="icon"></td>
    <td><img src="controlcenter.png" class="icon"style="height: 180px width: 180px;"></td>
    <td><img src="Multitaks.png" class="icon"style="height: 180px width: 180px;"></td>
  </tr>
  <tr>
      <td class="icontext">Afspraken</td>
      <td class="icontext">Situaties</td>
      <td class="icontext">Grenzen</td>
      <td class="icontext">Categoriëen</td>
  </tr>
</table>



<!--Contact-->
<input type="button" class="contactbtn" value="Contact">




</html>

＆＃13;

Answer 1

查找媒体查询：

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

他们看起来像这样

@media screen and (min-width: 480px) {
body {
    background-color: lightgreen;
}

}

您可以输入特定尺寸的特定css

希望它能帮到你

/ 修改 / 您正在使用表格来定位元素。表格在响应式设计中使用并不是很有用。也许您可以将布局更改为现代网格系统，如Bootstrap或其他东西

Answer 2

检查this小提琴。

CSS更新：

Listener

如何使图标（照片）响应

2 个答案: