响应式页面

我们俗称的响应式页面，既能再pc端显示也能在移动端显示，一般来说，pc端的页面相对于手机端来说，页面较为宽大，显示的内容多，当切换到手机端，页面就要进行相应的改变，或者在窗口大小改变的时候，页面内容以及样式做相应的改变。

媒体查询

不同的移动端设备有不同宽度，我们可以通过chrom浏览器的开发者工具来看下

image.png image.png

我们可以看到开发者工具提供目前主流的移动端设备尺寸大小

 @media (min-width:320px){ //当设备是iphone5时
    body{
      background: red;
    }
  }
  @media (min-width:375px) {//当设备是iphone6时
    body{
      background: rgb(255, 145, 0);
    }
  }
  @media (min-width:414px) {//当设备是iphone6P时
    body{
      background: rgb(255, 230, 0);
    }
  }
  @media (min-width:768px) {//当设备是ipad时
    body{
      background: rgb(30, 255, 0);
    }
  }
  @media (min-width:1024px) {//当设备是pc端时
    body{
      background: rgb(0, 195, 255);
    }
  }

当设备尺寸不一样时候，显示不同的背景颜色，当我们根据需要来编写不同的css样式，这样就做了响应式。

我们需要注意的是，css有权重，当样式不是我们想要的效果时，需要查看权重大小。