【html】学习记录-CSS的media queries属性

标签：

• 使用media queries属性可以根据浏览器的宽度自动选择激活需要的CSS定义：

        其基本格式如下:

• @media screen and (min-width: 600px){
    /* 即当屏幕宽度大于等于600px时触发此CSS定义 */
    ... 
  }
  
  @media screen and (max-width: 599px){
    /* 即当屏幕宽度小于等于599px时触发此CSS定义 */
    ... 
  }

   

  示例：

• 

  <div class="container">
    <nav>
      <ul>
        <li>导航01</li>
        <li>导航02</li>
        <li>导航03</li>
        <li>导航04</li>
        <li>导航05</li>
      </ul>
    </nav>
    <section>陈玩玩在此</section>
    <section>陈玩玩在此</section>
    <section>陈玩玩在此</section>
  </div>
  
  
  <style type="text/css">
  
  .container{
    border: 2px solid green;
    padding: 10px;
    overflow: auto;
  }
  
  nav{
    border: 1px solid pink;
  }
  
  nav ul{
    padding: 10px;
    margin: 0 auto;
  }
  
  section{
    border: 1px solid yellow;
    padding: 10px;
  }
  
  /* 以下定义media queries相关CSS */
  
  /* 当浏览器最小宽度为600px则触发如下CSS */
  
  @media screen and (min-width: 600px){
    /* 这里生成双列布局，左边导航，右侧内容*/
    nav{
      float:left;
      width: 25%;
    }
  
    section{
      margin-left:25%;
    }
  }
  
  /* 当浏览器最大宽度小于599px时触发如下CSS */
  
  @media screen and (max-width: 599px){
    nav li{
      display:inline; /* 这里保证导航里的元素横向排列 */
    }
  }
  </style>

  View Code

  当≤599px时，見该网页示例：http://www.gbtags.com/gb/gbtutorials/82.htm

        当≥600px时，效果如下：

• 响应式布局(responsive design)即是基于media queries技术

【html】学习记录-CSS的media queries属性

标签：

原文地址：http://www.cnblogs.com/suzyc/p/4690281.html