介绍
媒体查询(Media Queries)是CSS3的技术,可以根据设备的特性(如屏幕宽度、高度、方向等)来应用不同的样式规则。媒体查询可以使网页在不同设备上呈现不同的样式,以实现响应式设计。
语法
@media scree and (max-width: 600px) {/* 在屏幕宽度小于600px时应用以下样式 */body {background-color: lightblue;}
}
媒体类型
all:使用设备
print:打印机和预览打印
scree(常用):电脑屏幕 手机 平板
查询关键字
and(常用) 可以将多个媒体特性连接到一起,相当于“且”的意思。
only 指定某个特定的媒体类型,可以省略。
not 排除某个媒体类型,相当于“非”的意思,可以省略。
媒体特性
width 等于xx时样式
min-width 最大不超过xx px 时,小于xx px时的样式
max-width 最小不超过xx px时, 大于xx px时的样式