媒体查询之响应式布局一

媒体查询

媒体查询：
根据设备的宽度（浏览器的宽度）来显示不同的css样式。
注意点：默认样式需要写在最前面。

常见的设备以下：
all (所有的设备) —使用频率最高。
print (打印设备)
screen (电脑屏幕,平板电脑,智能手机)

实现横竖屏幕的body样式搭配：

orientation —方向 portrait—竖 landscape— 横
方法1：

    @media screen and (orientation:portrait) {
      body {
        font-size: 14px;
        background: yellow;
      }
    }

    @media screen and (orientation: landscape) {
      body {
        font-size: 20px;
        background: blue;
      }
    }

方法2：

  <link rel="stylesheet" href="./css/style1.css" media="all and (orientation:portrait)">
  <link rel="stylesheet" href="./css/style2.css" media="all and (orientation:landscape)">

响应式布局一：

根据媒体查询，判断视口的大小，来改变div的显示多少。
HTML

 <section>
    <div>
      <img src="./image/pic2.png" alt="">
      <h3>笑意</h3>
    </div>
    <div>
      <img src="./image/pic2.png" alt="">
      <h3>笑意</h3>
    </div>
    <div>
      <img src="./image/pic2.png" alt="">
      <h3>笑意</h3>
    </div>
    <div>
      <img src="./image/pic2.png" alt="">
      <h3>笑意</h3>
    </div>
    ........
</section>

CSS

  <style>
    * {
      margin: 0;
      padding: 0;

    }

    img {
      display: block;
      width: 100%;
    }

    section {
      min-width: 1200px;
      height: 500px;
      background: #ccc;
      margin: 0 auto;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
    }

    div {
      /* 使用媒体查询，时时改变div的宽度即可，便能实现响应式 */
      width: 23%;
      margin-bottom: 10px;
    }

    @media screen and (min-width: 1024px) and (max-width: 1200px) {
      section div {
        width: 23%;
      }
    }

    @media screen and (min-width: 750px) and (max-width: 1023px) {
      section div {
        width: 32%;
      }
    }

    @media screen and (min-width: 480px) and (max-width: 749px) {
      section div {
        width: 48%;
      }
    }

    @media screen and (max-width: 479px) {
      section div {
        width: 98%;
      }
    }
  </style>