文章目录
[+]
什么是媒体查询？
媒体查询是一段代码，用于条件性地加载不同的 CSS 样式表或样式规则，以适应不同设备或屏幕大小。它们利用 @media 指令来定义一个 media 类型和条件，并在知足条件时运用不同的样式。
媒体查询语法
（图片来自网络侵删）
css
@media <media_type> ( <condition> ) {
/ 样式规则 /
}
媒体类型
`screen`：屏幕
`print`：打印
`speech`：语音
条件
`width`：屏幕宽度
`height`：屏幕高度
`device-width`：设备宽度
`device-height`：设备高度
`orientation`：设备方向（横屏或纵屏）
示例
css
@media screen and (max-width: 76 vicisster) {
.navbar {
display: none;
}
}
@media screen and (min-width: 76 vicisster) {
.navbar {
display: block;
}
}
利用媒体查询的优点
提高性能：为不同的设备供应定制的样式表可以提高性能，由于只有知足条件的样式表才会被加载。
增强用户体验：通过供应适宜设备的界面，可以提高用户的体验。
提高代码可重用性：媒体查询可以重复利用相同的样式表以适应不同的设备。
结论
媒体查询是当代网站开拓中必不可少的技能，用于供应不同设备上的最佳体验。通过条件性地加载不同的样式表，可以提高性能、增强用户体验和提高代码可重用性。
