第四课：css3媒体查询

来源：互联网发布：js offsetwidth取不到编辑：程序博客网时间：2024/06/16 20:57

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

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中的样式覆盖。

阅读全文

2 0