关于做响应式页面开发

何为响应式？

针对不同的分辨率，实现页面的自动适应

使用何种技术？

媒体查询技术@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

语法结构？

@media screen and (max-width:1150px){

body{
background:#f00;
}

}

以上内容表示：在屏幕分辨率<=1150px时，执行的样式

screen 表示：用于电脑屏幕，平板电脑，智能手机等。

几个关键的临界点？

@media screen and (max-width:1199px){

//<=1199的设备

}

@media screen and (max-width:991px){

//<=991的设备

}

@media screen and (max-width:767px){

//<=767的设备

}

注意临点的顺序，否则就很悲剧了

@media screen and (min-width:768px){

//>=768的设备

}

@media screen and (min-width:992px){

//>=992的设备

}

@media screen and (min-width:1200px){

//>=1200的设备

}

如何应用到移动端？

如果想要在手机端自适应，你还需要写上下面这句话。

<meta name="viewport" content="width=device-width, initial-scale=1"/>