学习媒体查询 2

最新推荐文章于 2024-07-05 16:13:36 发布

梧桐林的凤凰

最新推荐文章于 2024-07-05 16:13:36 发布

阅读量82

点赞数

分类专栏： css 文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_46288059/article/details/119957088

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

媒体查询引入方式

这里有三种方式，根据注释可以查看：

1. html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 方法一  -->
    <!-- <style>
      .header {
        width: 100%;
        height: 400px;
      }

      .header div {
        float: left;
        height: 130px;
      }

      .header div:nth-child(1) {
        background-color: brown;
      }

      .header div:nth-child(2) {
        background-color: cadetblue;
      }

      .header div:nth-child(3) {
        background-color: chartreuse;
      }

      @media screen and (min-device-width: 501px) and (max-device-width: 1000px) {
        .header div {
          width: 33.3%;
        }
      }

      @media screen and (min-device-width: 301px) and (max-device-width: 500px) {
        .header div {
          width: 50%;
        }
      }

      @media screen and (min-device-width: 10px) and (max-device-width: 300px) {
        .header div {
          width: 100%;
        }
      }
    </style> -->

    <!-- 方法二 -->
    <!-- <style media="(min-device-width:0px) and (max-device-width:100px)">
      .header div {
        width: 100%;
        background-color: darkblue;
      }
    </style> -->

    <!-- 方法三 link标签 -->
    <link rel="stylesheet" href="./common.css" />
    <link rel="stylesheet" href="./css3.css" media="(min-device-width:500px)" />
    <link
      rel="stylesheet"
      href="./css2.css"
      media="(min-device-width:200px) and (max-device-width:499px)"
    />
    <link rel="stylesheet" href="./css1.css" media="(min-device-width:0px) and (max-device-width:199px)">
  </head>
  <body>
    <div class="header">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

以下文件放在html文件同层级

2. common.css文件

.header {
  width: 100%;
  height: 400px;
}

.header div {
  float: left;
  height: 130px;
}

.header div:nth-child(1) {
  background-color: brown;
}

.header div:nth-child(2) {
  background-color: cadetblue;
}

.header div:nth-child(3) {
  background-color: chartreuse;
}

3. css1.css文件

.header div {
  width: 100%;
}

4. css2.css文件

.header div {
  width: 50%;
}

5. css3.css文件

.header div {
  width: 33.33%;
}

梧桐林的凤凰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习媒体查询 2

媒体查询引入方式这里有三种方式，根据注释可以查看：1. html文件<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,
复制链接

扫一扫