CSS 基础
取值单位
外观样式
布局样式
动画样式
工具与规范
实例练习
媒体查询
CSS 的媒体查询使得我们可以设定一套规则,使得样式仅在浏览器或设备匹配时才应用。最经典的场景是,我们可以在不同的视窗宽度下控制元素的大小,达到响应式的效果。以此适应电脑、手机、Pad 等多套设备。
媒体查询语法:
@media 媒体类型 and (媒体表达式) {
/* CSS 样式 */
}
一个媒体查询通常由以下三部分组成:
- 媒体类型:告诉浏览器这段 CSS 样式应用的媒体类型,如印刷品或屏幕。
- 媒体表达式:一个表达式,比如屏幕最大宽度等。
- CSS 样式
媒体类型
媒体类型有以下选择项:
- all:所有的设备类型。
- print:打印预览屏幕下。
- screen:用于屏幕。
- speech:语音合成器。
我们最常用的媒体类型是 all
或者 screen
,一般情况下也可以不设置媒体类型。
媒体表达式
以下是一个例子,在视窗宽度最多为 400像素时,将 <h1>
元素的颜色设置为 teal
色。
@media (max-width: 400px) {
h1 {
color: teal;
}
}
$$demo
<h1>三眼鸭的编程教室</h1>
<style>
@media (max-width: 400px) { h1 { color: teal; } }
</style>
$$