是什么
媒体查询,html5新增的特性,可以检测当前设备的类型,计算机、打印机、阅读器等,以及当前设备的的宽度。
【图片来源百度】
媒体查询的作用
媒体查询类似一个钩子(hook),监听窗口变化,如果达到了设定的范围,就会触发对应的效果。
常用的应用场景例如:
有个页面,要支持手机端同时还要支持平板和pc。且几个端显示的效果差别不是很大,那么可以使用媒体查询,针对不同的屏幕做不同的适配、显示和隐藏。(像淘宝这种,pc和移动端差别很大的,同时内容也比较多,使用媒体查询反而会增加它的页面加载效率,他们使用的就是直接制作两套页面。)
简言之,媒体查询是根据不同媒体大小,能做不同的适配。
例子
媒体查询,检测显示设备的宽高。
语法:@media <only|not> <mediatype> and (<expressions>){css code...}
当屏幕大小大于等于480px的时候会将body的背景颜色修改为lightgreen
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
有一个注意点就是,and
后面有一个空格,没有空格会语法错误,且不提示
css3 的媒体类型:
值 描述 用于打印机 screen 计算机、手机、平板的屏幕。一般css自适应都是用这个值 speech 用于大声“读出”的屏幕阅读器
表达式常用属性(属性值一般为px)
属性 | 说明 |
---|---|
height | 高度固定值 |
max-height | 高度小等于给定值 |
min-height | 高度大于给定值 |
width | 宽度固定值 |
max-width | 宽度小于等于给定值 |
min-width | 宽度大于等于给定值 |
媒体查询在外部css连接中的使用
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
<link rel="stylesheet" media="scren and (max-width:300px)" href="print.css">
/*屏幕小于等于300时这块样式会生效*/
总结
当前的软件发展趋势,新出的特性总是围绕着高效和简洁,媒体查询看的有点复杂,但实际使用起来是并不难。媒体查询的出现一方面也是为了简化代码。