使用媒体查询实现响应式设计(案例)

前端码趣逗士

于 2024-08-30 09:16:14 发布

阅读量120

点赞数 6

文章标签：媒体 css 前端

本文链接：https://blog.csdn.net/m0_54829066/article/details/141704709

版权

案例一：调整导航栏布局

<!DOCTYPE html>
<html>

<head>
  <style>
    nav {
      display: flex;
      justify-content: space-between;
      padding: 20px;
    }

    nav ul {
      list-style-type: none;
      display: flex;
    }

    nav ul li {
      margin-right: 20px;
    }

    @media (max-width: 768px) {
      nav ul {
        flex-direction: column;
      }

      nav ul li {
        margin: 10px 0;
      }
    }
  </style>
</head>

<body>
  <nav>
    <h1>网站标题</h1>
    <ul>
      <li>首页</li>
      <li>产品</li>
      <li>关于我们</li>
      <li>联系我们</li>
    </ul>
  </nav>
</body>

</html>

在这个案例中，当屏幕宽度小于 768 像素时，导航栏的菜单项会从横向排列变为纵向排列。

案例二：改变字体大小

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    p {
      font-size: 16px;
    }

    @media (max-width: 600px) {
      p {
        font-size: 14px;
      }
    }
  </style>
</head>

<body>
  <p>这是一段文字，用于展示字体大小的响应式变化。</p>
</body>

</html>

当屏幕宽度小于 600 像素时，段落中的文字字体大小会从 16 像素变为 14 像素。

案例三：隐藏元素

<!DOCTYPE html>
<html>

<head>
  <style>
   .sidebar {
      width: 30%;
      float: right;
      background-color: #f1f1f1;
      padding: 20px;
    }

    @media (max-width: 768px) {
    .sidebar {
        display: none;
      }
    }
  </style>
</head>

<body>
  <div class="main-content">
    主要内容
  </div>
  <div class="sidebar">
    侧边栏内容
  </div>
</body>

</html>

在屏幕宽度小于 768 像素时，侧边栏会被隐藏。

案例四：调整图片尺寸

<!DOCTYPE html>
<html>

<head>
  <style>
    img {
      max-width: 100%;
    }

    @media (min-width: 1200px) {
      img {
        max-width: 50%;
      }
    }
  </style>
</head>

<body>
  <img src="image.jpg" alt="示例图片">
</body>

</html>

当屏幕宽度大于等于 1200 像素时，图片的最大宽度变为 50%，小于 1200 像素时则为 100%。

案例五：改变页面布局

<!DOCTYPE html>
<html>

<head>
  <style>
   .container {
      display: flex;
    }

   .left-column {
      width: 25%;
      background-color: #f1f1f1;
    }

   .right-column {
      width: 75%;
    }

    @media (max-width: 768px) {
     .container {
        flex-direction: column;
      }

     .left-column {
        width: 100%;
      }

     .right-column {
        width: 100%;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="left-column">
      左侧栏内容
    </div>
    <div class="right-column">
      右侧栏内容
    </div>
  </div>
</body>

</html>

当屏幕宽度小于 768 像素时，页面从两栏布局变为单栏布局。

这些案例展示了媒体查询在实现响应式设计中的多种应用，可以根据不同的需求灵活调整页面元素的样式和布局，以适应不同的屏幕尺寸。

前端码趣逗士

关注

6
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用媒体查询实现响应式设计(案例)

这些案例展示了媒体查询在实现响应式设计中的多种应用，可以根据不同的需求灵活调整页面元素的样式和布局，以适应不同的屏幕尺寸。当屏幕宽度大于等于 1200 像素时，图片的最大宽度变为 50%，小于 1200 像素时则为 100%。在这个案例中，当屏幕宽度小于 768 像素时，导航栏的菜单项会从横向排列变为纵向排列。当屏幕宽度小于 600 像素时，段落中的文字字体大小会从 16 像素变为 14 像素。当屏幕宽度小于 768 像素时，页面从两栏布局变为单栏布局。在屏幕宽度小于 768 像素时，侧边栏会被隐藏。
复制链接

扫一扫