响应式布局

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第10天，点击查看活动详情

写在前面的话：本文主要就响应式布局进行一系列讲解。

响应式布局网站优势和特点

1. 这种布局技术不是完美，没有一种布局技术是完美

2. 响应式布局的网站一般谁在用

   1. 小公司

   2. 成本低

   3. 对线上交流不是很看重的公司 会使用

      1. vs code只是提供了一个入口 让用户下载工具而已（不像天猫淘宝这么线上交易的业务）
      2. 环保机构 政府网站 发布公告和信息而已

3. 为什么天猫 淘宝 京东不用 要追求用户体验 极致。

   1. 因为他们有app
   2. 他们有移动端的页面

4. pc端用pc端的页面，移动端用移动端专门的页面 体验更好。

5. 小结

   1. 响应式布局的网站的应用场景

      1. 对线上交流不是很看重的公司 会使用
      2. vs code只是提供了一个入口 让用户下载工具而已（不像天猫淘宝这么线上交易的业务）
      3. 环保机构 政府网站 发布公告和信息而已

   2. 前端程序员 搬砖 根据不同的需求 去实现业务

响应式布局的实现的原理

媒体(media )查询

媒体查询

一种css技术而已，可以根据设备不同的宽度 去加载对应的 css代码

媒体查询的初体验

1. 当屏幕的宽度 等于 600px body的颜色 变成 red

       /* 600px red */
       @media screen and (width:600px){
         body{
           background-color: red;
         }
       }
   

2. 当屏幕的宽度 等于 800px body的颜色 变成 blue

       /* 800px blue */
       @media screen and (width:800px){
         body{
           background-color: blue;
         }
       }
   

语法2

  /* 当屏幕 大于 800px yellow  */
  /*  最小也要800px   */

  @media screen and (min-width:800px){
    body{
      background-color: yellow;
    }
  }


  /* 当屏幕 小于  400px pink  */
  /* 最大 400px    */
  @media screen and (max-width:400px){
    body{
      background-color: pink;
    }
  }

  /*  500 - 600px black  */
  @media screen and (min-width:500px) and (max-width:600px) {
    body{
      background-color: #000;
    }
  }