我们俗称的响应式页面，既能再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有权重，当样式不是我们想要的效果时，需要查看权重大小。
