内容简介:媒体类型
媒体指的就是各种设备 (移动设备, PC设备) 查询指的是要检测属于哪种设备 媒体查询: 通过查询当前属于哪种设备, 让网页能够在不同的设备下正常的预览 复制代码
学习媒体查询的核心是什么?
实现页面在不同设备下正常预览 [判断当前设备]
媒体类型
将不同的设备划分为不同的类型
all (所有的设备) print (打印设备) screen (电脑屏幕,平板电脑,智能手机) 复制代码
媒体特性
用来描述设备的特点,比如宽度,高度... 复制代码
- width 网页显示区域完全等于设置的宽度
- height 网页显示区域完全等于设置的高度
- max-width / max-height 网页显示区域小于等于设置的宽度
- min-width / min-width 网页显示区域大于等于设置的宽度
- orientation: portrait (竖屏模式) | landscape (横屏模式)
语法关键字
目的将媒体类型和媒体特性链接到一块,进行设备检测 复制代码
- and 可以将多个媒体特性链接到一块,相当于且
- not 排除某个媒体特性 相当于非,可以省略
- only 指定某个特定的媒体类型, 可以省略
语法
- 外联式语法
<link rel="stylesheet" type="text/css" href="01.css" media="only screen and (max-width: 420px)"> 复制代码
- 内嵌式语法 @media only screen and (max-width: 420px) { body { background-color: red; } } 备注: 多个条件联写 @media only screen and (width: 320px) and (height: 568px) {} 复制代码
以上所述就是小编给大家介绍的《什么是媒体查询?》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。