使用 CSS3 中@media 实现网页自适应的示例代码

下面我来详细讲解如何使用 CSS3 中@media 实现网页自适应的示例代码及其攻略。

什么是@media

@media是CSS3中的一个规则，可以用于在不同的媒体条件下为不同的设备提供不同的样式。主要用来设置针对不同输出设备如屏幕、打印机等的不同样式。

通过@media规则，可以根据不同的设备来匹配不同的样式，因此可以使用它来实现网页自适应。

使用@media的示例代码

以下是使用@media实现网页自适应的示例代码：

/* 设置屏幕宽度大于等于 768px 的设备样式 */
@media only screen and (min-width: 768px) {
  body {
    background-color: grey;
  }

  .container {
    width: 90%;
    margin: 0 auto;
  }
}

/* 设置屏幕宽度小于 768px 的设备样式 */
@media only screen and (max-width: 767px) {
  body {
    background-color: pink;
  }

  .container {
    width: 100%;
    margin: 0;
  }
}

上述代码中，我们使用@media规则分别设置了屏幕宽度大于等于 768px 和小于 768px 两种情况下的不同样式。当屏幕宽度大于等于 768px 时，我们将背景颜色设置为灰色，并将容器的宽度设置为90%，并且居中显示；而当屏幕宽度小于 768px 时，我们将背景颜色设置为粉色，并将容器的宽度设置为100% ，并且取消了居中显示。

通过这种方式，我们可以为不同的屏幕尺寸提供不同的样式，从而实现网页自适应。

示例说明

示例1：PC端和移动端样式不同的导航栏

下面我们来看一个在PC端和移动端样式不同的导航栏示例：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS代码：

/* 导航栏的样式(适用于PC端) */
nav {
  background-color: grey;
  height: 50px;
}

nav ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-right:20px;
}

nav li:last-child {
  margin-right:0;
}

nav a {
  color: white;
  text-decoration: none;
}

/* 导航栏的样式(适用于移动端) */
@media screen and (max-width: 768px) {
  nav {
    background-color: pink;
    height: auto;
  }

  nav ul {
    display: none;
    text-align: center;
  }

  nav li {
    display: block;
    margin:5px 0;
  }

  nav li:last-child {
    margin-bottom:0;
  }

  nav a {
    color:black;
    text-align:center;
    background-color: white;
    display: block;
    padding:10px;
  }

  nav a:hover {
    background-color: lightgrey;
  }

  /* 点击展开菜单后显示的导航栏 */
  nav.mobile {
    margin-top: 50px;
  }

  nav.mobile ul {
    display: none;
  }

  nav.mobile.active ul {
    display: block;
  }
}

在这个示例中，我们使用@media规则来为不同的设备提供不同的导航栏样式，当屏幕宽度小于等于 768px 时，我们将导航栏样式设置为移动端样式，否则使用PC端样式。通过这种方式，我们可以让导航栏在不同的设备上具有最佳的显示效果。

示例2：网站宽度随屏幕大小而自适应的布局

以下是一个通过@media实现网站宽度随屏幕大小而自适应的布局示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>自适应布局示例</title>
  <style>
    /* 默认样式 */
    body {
      margin: 0;
      padding: 0;
      background-color: #ddd;
    }

    .container {
      width: 80%;
      margin: 0 auto;
      background-color: white;
      padding: 20px;
    }

    .box {
      background-color: grey;
      height: 100px;
      margin-bottom: 20px;
    }

    /* 小屏幕样式 */
    @media only screen and (max-width: 768px) {
      .container {
        width: 100%;
      }

      .box {
        height: 50px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>
</html>

在这个示例中，我们使用@media规则设置了小屏幕样式，即当屏幕宽度小于等于768px时，将容器的宽度设置为100%，而不是默认的80%。同时，我们将盒子的高度也进行了调整。

这样，当窗口大小变化时，容器和盒子的宽度都会随之自适应，从而实现网页自适应布局效果。

通过上述两个示例，相信大家已经掌握了如何使用@media规则实现网页自适应的基本方法。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用 CSS3 中@media 实现网页自适应的示例代码 - Python技术站