如何实现自适应导航页

分辨率大于960像素

分辨率大于768像素小于960像素

分辨率大于480像素小于768像素

分辨率小于480像素

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自适应导航页</title>
  <link href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
</head>
<body>
  <div class="service-section">
    <div class="inner-width">
      <h2 class="section-title">Our Service</h2>
      <div class="border"></div>
      <div class="service-container">
        <div class="service-box">
          <div class="service-icon">
            <i class="fas fa-paint-brush"></i>
          </div>
          <div class="service-title">极简主义</div>
          <div class="service-desc">
            传奇极简主义画家唐纳德·贾德（Donald Judd）说：“形状、体积、颜色、表面就是物品本身。它不应该被隐藏成为完全不同的整体的一部分，形状和材料不应因环境而改变。”
          </div>
        </div>
        <div class="service-box">
          <div class="service-icon">
            <i class="fas fa-paint-brush"></i>
          </div>
          <div class="service-title">极简主义</div>
          <div class="service-desc">
            传奇极简主义画家唐纳德·贾德（Donald Judd）说：“形状、体积、颜色、表面就是物品本身。它不应该被隐藏成为完全不同的整体的一部分，形状和材料不应因环境而改变。”
          </div>
        </div>
        <div class="service-box">
          <div class="service-icon">
            <i class="fas fa-code"></i>
          </div>
          <div class="service-title">极简主义</div>
          <div class="service-desc">
            传奇极简主义画家唐纳德·贾德（Donald Judd）说：“形状、体积、颜色、表面就是物品本身。它不应该被隐藏成为完全不同的整体的一部分，形状和材料不应因环境而改变。”
          </div>
        </div>
        <div class="service-box">
          <div class="service-icon">
            <i class="fas fa-brush"></i>
          </div>
          <div class="service-title">极简主义</div>
          <div class="service-desc">
            传奇极简主义画家唐纳德·贾德（Donald Judd）说：“形状、体积、颜色、表面就是物品本身。它不应该被隐藏成为完全不同的整体的一部分，形状和材料不应因环境而改变。”
          </div>
        </div>
        <div class="service-box">
          <div class="service-icon">
            <i class="fas fa-database"></i>
          </div>
          <div class="service-title">极简主义</div>
          <div class="service-desc">
            传奇极简主义画家唐纳德·贾德（Donald Judd）说：“形状、体积、颜色、表面就是物品本身。它不应该被隐藏成为完全不同的整体的一部分，形状和材料不应因环境而改变。”
          </div>
        </div>
        <div class="service-box">
          <div class="service-icon">
            <i class="fas fa-paint-brush"></i>
          </div>
          <div class="service-title">极简主义</div>
          <div class="service-desc">
            传奇极简主义画家唐纳德·贾德（Donald Judd）说：“形状、体积、颜色、表面就是物品本身。它不应该被隐藏成为完全不同的整体的一部分，形状和材料不应因环境而改变。”
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

CSS代码

*{
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
.service-section{
  background: url(../img/bg.jpg);
  background-size: cover;
  padding: 60px 0;
}
.inner-width{
  width: 100%;
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
  overflow: hidden;
}
.section-title{
  text-align: center;
  color: #ddd;
  text-transform: uppercase;
  font-size: 30px;
}
.border{
  width: 160px;
  height: 2px;
  background: #82ccdd;
  margin: 40px auto;
}
.service-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.service-box{
  max-width: 33.33%;
  padding: 10px;
  text-align: center;
  color: #ddd;
  cursor: pointer;
}
.service-icon{
  display: inline-block;
  width: 70px;
  height: 70px;
  border: 3px solid #82ccdd;
  color: #82ccdd;
  transform: rotate(45deg);
  margin-bottom: 30px;
  margin-top: 16px;
  transition: all .3s linear;
}
.service-icon i{
  line-height: 70px;
  transform: rotate(-45deg);
  font-size: 26px;
}
.service-box:hover .service-icon{
  background: #82ccdd;
  color: #ddd;
}
.service-title{
  font-size: 18px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.service-desc{
  font-size: 14px;
}

@media screen and (max-width: 960px) {
  .service-box{
    max-width: 45%;
  }
}
@media screen and (max-width: 768px) {
  .service-box{
    max-width: 50%;
  }
}
@media screen and (max-width: 480px) {
  .service-box{
    max-width: 100%;
  }
}

背景图：

链接:https://pan.baidu.com/s/1Xb0uVQck7ci-KTefBfh7MA 密码:kzk4

来源：oschina

链接：https://my.oschina.net/mj20200214/blog/4254621

标签

FLEX

Solid

FontAwesome