第四课：css3媒体查询

最新推荐文章于 2023-11-01 22:59:35 发布

sf_wilson

最新推荐文章于 2023-11-01 22:59:35 发布

阅读量433

点赞数 3

分类专栏： Html5/Js 文章标签： media css3媒体查询

本文链接：https://blog.csdn.net/itsme_web/article/details/77150105

版权

Html5/Js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

简介：本期将围绕媒体查询，介绍下媒体查询的构成要素以及使用过程中常出现的问题。

1、行内css3 - 媒体查询：

代码实例：

<!DOCTYPE HTML>
<html>
  <head>
    <title>媒体查询</title>
    <meta charset="utf-8">
    <meta name="viewport" content=""/>
    <meta name="Author" content="Wilson Xu">
    <style type="text/css">
      *{margin: 0;padding: 0;font-family: "Microsoft yahei";}
      a{text-decoration: none;}
      a img{display: block;border: none;}
      li{list-style: none;}

      /*
        媒体查询：
        1、关键字 @media
        2、
          all 所有设备
          screen 电脑屏幕、智能手机、平板电脑
          print 打印机设备
          aural braille embossed ...
        3、
          and
          only
          not
        4、
          max-width
          min-width
      */
      html,
      body{
        height: 100%;
      }
      .divColor{
        width: 100%;
        height: 100%;
      }
      @media screen and (min-width: 1000px) {
        /*最小1000px -> >= 1000px*/
        .divColor{
          background: #f00;
        }
      }
      @media screen and (min-width: 500px) and (max-width: 1000px) {
        /*500-1000px间 -> 500px <= screen < 1000px*/
        .divColor{
          background: #0f0;
        }
      }
      @media screen and (max-width: 500px) {
        /*最大500px -> < 500px*/
        .divColor{
          background: #00f;
        }
      }
    </style>
    <!-- <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> -->
  </head>
  <body>
    <div class="divColor"></div>
    <script type="text/javascript">

    </script>
  </body>
</html>

特别注意：使用时，and需要与后面的元素用空格隔开，否则媒体查询失效。

2、引用分属不同css样式表中的样式：

<link rel='stylesheet' href='1.css' media='screen and (min-width: 1000px)' />
<link rel='stylesheet' href='2.css' media='screen and (min-width: 500px) and (max-width: 1000px)' /> 
<link rel='stylesheet' href='3.css' media='screen and (max-width: 500px)' />

特别注意：如果不加meida属性，样式会被3.css中的样式覆盖。

sf_wilson

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
第四课：css3媒体查询

简介：本期将围绕媒体查询，介绍下媒体查询的构成要素以及使用过程中常出现的问题。1、行内css3 - 媒体查询：代码实例：媒体查询 *{margin: 0;padding: 0;font-family: "Microsoft yahei";} a{text-decoration: none;}
复制链接

扫一扫