什么是媒体查询
媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有:width、height和color(等)。使用媒体查询可以在不改变页面内容的情况下,为特性的一些输出设备定制显示效果。
媒体查询语法
CSS3中的媒体查询:根据浏览器窗口大小的改变,页面样式就会改变。
body { background-color: #0033FF; } @media screen and (max-width: 960px) { body { background-color: #FF6699 } } @media screen and (max-width: 768px) { body { background-color: #00FF66; } } @media screen and (max-width: 550px) { body { background-color: #6633FF; } } @media screen and (max-width: 320px) { body { background-color: #FFFF00; } }
上边的代码属于media的标准语法 表示在不同屏幕宽度下显示不同的样式