@media screen 响应式布局

定义和使用

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

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

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

有两种方式：

一种是直接在link中判断设备的尺寸

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">
意思为当屏幕的宽度大于等于400px的时候，应用styleA.css

另一种方式，即是直接写在 style 标签里

@media screen and (max-width: 600px) { } /*当屏幕尺寸小于600px时，应用下面的CSS样式*/ 

@media screen and (min-width: 960px) and (max-width:1200px) { } /*当屏幕尺寸大于960px且小于1200px时，应用下面的CSS样式*/ 

注意：

如果你把@media (min-width: 768px)写在了下面那么很悲剧，

@media (min-width: 1200){ //>=1200的设备 }

@media (min-width: 992px){ //>=992的设备 }

@media (min-width: 768px){ //>=768的设备 }

因为如果是1440,由于1440>768那么你的1200就会失效。

所以我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面

@media (max-width: 1199){ //<=1199的设备 }

@media (max-width: 991px){ //<=991的设备 }

@media (max-width: 767px){ //<=768的设备 }

 

最后，拜拜~~