1,媒体查询的作用
@media (media-feature-name: value) {
/* 符合条件时应用的样式 */
}
上面是媒体查询的基本结构,根据查看网页的设备的某些重要信息(比如屏幕大小、分辨率、颜色位深等),页面可以分别应用不同的样式甚至替换整个样式表。
如果浏览器当前的条件与圆括号中的条件匹配,它就会采用花括号中的那些样式。如果不匹配,浏览器会忽略这些样式。
注意:浏览器始终会采用位于@media代码块之外的样式。满足条件时的媒体查询样式是在其他样式基础上应用的。
为此,条件式媒体查询样式经常要覆盖其他样式,比如隐藏之前的可见元素,把区块移动位置,调整字号等。
2,媒体查询中最常用的媒体特性(media feature)
特性名
值
应用场景
width
min-width
max-width
显示区域的宽度(对打印机而言是打印表面)
改变布局以适应非常窄(如手机)或非常宽的显示器。
height
min-height
max-height
显示区域的高度
改变布局以适应非常长或非常短的显示器
device-width
min-device-width
max-device-width
当前计算机或设备屏幕的宽度
(或打印输出时纸面的宽度)
根据不同设备(如手机)调整布局
device-height
min-device-height
max-device-height
屏幕或纸面的高度
根据不同设备(如手机)调整布局
orientation
landscape(横向)或portrait(纵向)
根据设备的朝向调整布局
device-aspect-ratio
min-device-aspect-ratio
max-device-aspect-ratio
显示区域的宽高比(1/1是正方形)
根据窗口形状调整样式(问题可能比较复杂)
color
min-color
max-color
屏幕颜色的位深
(1位表示黑白,目前主流显示器都是24位)
检查是否支持彩色输出(比如是不是黑白打印),
或者支持的颜色数量
虽然有这么多媒体特性,但目前最流行最常用的是如下几个:
max-device-width:用于创建手机版网站
max-width:用于针对窗口宽度设定不同的样式
orientation:用于根据平板电脑或iPad的横向或者竖向来改变布局
3,使用样例一
默认情况下左栏的背景色是黄色的,当浏览器窗口小于400像素时,左栏的背景色变成橙色。当窗口继续缩小,小于300像素时,左栏的背景色变成红色。