媒体查询学习笔记

概念

布局视口( layout viewport ): 页面内容的大小
可视视口( visual viewport ): 设备的屏幕大小，会根据缩放动态的调整
理想视口( ideal viewport ): 默认宽度为960px左右,假设设置了<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">，那么理想视口会等于布局适口

栗子

@media only screen and(minwidth){
}

@media代表启用媒体查询
only的作用是针对于不支持媒体查询的老旧浏览器版本，让浏览器忽略掉{}中书写的样式，@media only screen在老旧浏览器中会被识别为@media only，浏览器无法找到名为only的设备，所以大括号中的样式不会被应用，而在支持媒体查询的浏览器中@media only screen会被识别为@media screen，也就正常通过了。