响应式页面总结

手机端页面的做法：

媒体查询

media

<style>
/*  注意：400px后面不要有 “ ; ”   */
  @media (max-width: 400px){ /* 0 ~400 */ 
    body{
      background: red;
    }
  }
</style>

说明：如果宽度满足0~400px之间，body就会变红。

PS：media可写多个。

效果.gif

• 两者都要满足

  @media ( 条件1 ) and ( 条件2 )

  @media (min-width:320px ) and (max-width:425px){  /*320 ~ 425*/
    body{
      background: red;
    }
  }

  @media (min-width:425px ) and (max-width:700px){  /*425 ~ 700*/
    body{
      background: red;
    }
  }

• 媒体查询的结果可以用css文件代替吗?

  <link rel="stylesheet" href="style.css" media="(max-width:500px)">

说明：设备宽度为0~500px时才会生效。

PS：style.css会自动提前下载好了

效果.gif

• 栗子：

  建议先做手机
  手机端 + pc端

移动端样式

/*移动端样式*/
  * {margin: 0;padding: 0;}
  a {text-decoration: none;color: #000;}
  ul,ol {list-style: none;}
  header{
    padding: 20px;
    position: relative;
  }
  /* button的位置 */
  header>button{
    position: absolute;
    top:30px;
    right: 20px;
  }
  .logo {
    height: 50px;
    width: 50px;
    background: darkcyan;
    border-radius: 50%;
  }
  /* 导航栏默认看不见 */
  .nav {
    display: none;
    /* background: darkkhaki; */
  }
  /* 激活看得见 */
  .nav.active {
    display: flex;
    justify-content: space-between;
  }
  .nav>li{
    background:deepskyblue;
    padding: 5px 10px;
  }
  /* 默认情况下pc端的导航为隐藏 */
  .nav2{
    display: none;  
  }

pc端样式

/* pc端样式 */
@media (min-width:450px) {
  header>button{
      display: none;
  }
  .nav,.nav.active{
    display:none;
  }
  .nav2{
    display:block;
  }
  header{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  header .nav2{
    display: flex;
    margin-left: 20px ;
  }
  header .nav2>li{
    margin: 5px 10px;
  }
}

html

<header>
  <div class="logo"></div>
  <button id="aa">菜单栏</button>
  <div class="box">
    <!-- 移动端导航 -->
    <ul id="yy" class="nav">
      <li><a href="#">导航1</a></li>
      <li><a href="#">导航2</a></li>
      <li><a href="#">导航3</a></li>
      <li><a href="#">导航4</a></li>
      <li><a href="#">导航5</a></li>
    </ul>
    <!-- pc端导航 -->
    <ul class="nav2">
        <li><a href="#">导航1</a></li>
        <li><a href="#">导航2</a></li>
        <li><a href="#">导航3</a></li>
        <li><a href="#">导航4</a></li>
        <li><a href="#">导航5</a></li>
    </ul>
  </div>
</header>

/*js菜单隐藏切换*/
<script>
  aa.onclick = function () {
    yy.classList.toggle('active')
  }
</script>

预览 | github

效果.gif

总结：

• 1、学会media。

• 2、学会要设计图，没图不做。（pc端效果、手机端效果）

• 3、学会隐藏元素。（display: none; display: block;）

• 4、手机端要加meta
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

• 5、手机端的交互方式不一样。

  a、没有hover
  b、有touch事件
  c、没有resize
  d、没有滚动条