CSS3媒体查询

leolee18
233 阅读6分钟

媒体查询是CSS3中引入的一个功能强大的特性，它允许开发者根据设备的特性（如屏幕尺寸、分辨率等）来应用不同的CSS样式。通过媒体查询，我们可以针对不同的设备类型（如手机、平板、桌面电脑等）制定不同的样式规则，从而实现响应式设计。

媒体类型和媒体查询

查询类型

  • print：打印
  • screen：屏幕
  • all：所有

关键字

  • and：可以将多个媒体特性连接到一起，相当于“且”的意思。
  • not：排除某个媒体类型，相当于“非”的意思，可以省略。
  • only：指定某个特定的媒体类型，可以省略。

媒体特性

width,device-width,aspect-ratio,device-aspect-ratio,color,color-index,monochrome,resolution都是接受min-\max- width,device-width取值。asset-ratio取值。color,resolution,grid取值。resolution取值。

  • width,height ：设备中页面可见区域宽度、高度
  • device-width,device-height：设备屏幕可见宽度、高度
  • orientation：定义高是否大于或等于宽度。portrait是，landscape否
  • aspect-ratio：定义宽高比，如16:9
  • device-aspect-ratio：定义设备宽高比
  • color：定义颜色模式，如16位、24位、32位,不是彩色0
  • color-index：定义颜色索引模式，如256色、16位、24位，不是彩色0
  • monochrome：指定了一个黑白（灰度）设备每个像素的比特数。如果不是黑白设备，值为0。
  • resolution：指定输出设备的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的点数来表示
  • scan: 定义扫描模式，如扫描模式是 progressive（线性扫描）还是 interlace（隔行扫描）
  • grid：判断输出设备是网格设备还是位图设备。如果设备是基于网格的（例如电传打字机终端或只能显示一种字形的电话），该值为1，否则为0。
<!-- 定义外部样式表文件的媒体类型 -->
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
<!-- 定义内部样式表文件的媒体类型 -->
<style type="text/css" media="screen"> ... </style>

<style type="text/css">
    @importurl(style.css) all;
</style>

@importurl(reset.css) screen;   
@importurl(print.css) print;

使用@media

  • <media_type>：指定媒体类型，具体说明参考上表所示。
  • ：指定媒体特性。放在一对圆括号中，如(min-width:400px)。
  • 逻辑运算符，如and（逻辑与）、not（逻辑否）、only（兼容设备）等。
@media [only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*{
    /* CSS样式列表 */
}

应用@media

and运算符用于符号两边规则均满足条件的匹配

@media screen and (max-width : 600px) {
    /*匹配宽度小于等于600px的屏幕设备*/
}

not运算符用于取非，即所有不满足该规则的均匹配。

@media not print {
    /*匹配除了打印机以外的所有设备*/
}

（逗号）相当于or运算符，用于两边有一条满足则匹配

@media screen , (min-width : 800px) {
    /*匹配屏幕或者宽度大于等于800px的设备*/
}

使用媒体查询时，必须加括号，一个括号就是一个查询

@media (max-width : 600px) {
    /*匹配界面宽度小于等于600px的设备*/
}
@media (min-width : 400px) {
    /*匹配界面宽度大于等于400px的设备*/
}
@media (max-device-width : 800px) {
    /*匹配设备（不是界面）宽度小于等于800px的设备*/
}
@media (min-device-width : 600px) {
    /*匹配设备（不是界面）宽度大于等于600px的设备*/
}

媒体查询允许相互嵌套，这样可以优化代码，避免冗余

@media not print {
    /*通用样式*/
    @media (max-width:600px) {
        /*此条匹配宽度小于等于600px的非打印机设备 */
    }
    @media (min-width:600px) {
        /*此条匹配宽度大于等于600px的非打印机设备 */
    }
}

案例实战

/* 应用于移动设备，且设备最大宽度为480px */
@media screen and (max-device-width: 480px) {
    .a { background: #ccc;}
}
/* 显示屏幕宽度小于等于600px */
@media screen and (max-width: 600px) {
    .b {
        background: red; color:#fff;
        border: solid 1px #000;
    }
    span.lt600 { display: inline-block; }
}
/* 显示屏幕宽度介于600～900px */
@media screen and (min-width: 600px) and (max-width: 900px) {
    .c {
        background: red; color:#fff;
        border: solid 1px #000;
    }
    span.bt600-900 { display: inline-block; }
}
/* 显示屏幕宽度大于等于900px */
@media screen and (min-width: 900px) {
    .d {
        background: red;  color:#fff;
        border: solid 1px #000;
    }
    span.gt900 { display: inline-block; }
}

orientation 媒体查询

/* 如果目标是横向模式 Apple iPad，则使用：  */
@media (orientation: landscape) { ... }

/* 如果目标是纵向模式 iPad，则使用：  */
@media (orientation: portrait) { ... }

aspect-ratio\device-aspect-ratio 媒体查询

@media screen and (aspect-ratio: x/y) {
  /* 应用的样式 */
}
@media screen and (device-aspect-ratio:4/3){ … }

/* 如果要应用于宽高比为16:9的设备 */
@media screen and (aspect-ratio: 16/9){
  /* 应用的样式 */
}

color\color-index 媒体查询

/* 向所有能显示颜色的设备应用样式表 */
@media all and (color) { ... }

/* 向每个颜色单元至少有4个比特的设备应用样式表 */
@media all and (min-color: 4) { ... }

/* 向所有使用索引颜色的设备应用样式表 */
@media all and (color-index) { ... } 

/* 向所有使用至少256个索引颜色的设备应用样式表 */
/* <link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />  */

monochrome 媒体查询

/* 向所有黑白设备应用样式 */
@media all and (monochrome) { ... } 

/* 向每个像素至少8比特的黑白设备应用样式 */
@media all and (min-monochrome: 8) { ... }

resolution 媒体查询

/* 为每英寸至多300点的打印机应用样式 */
@media print and (min-resolution: 300dpi) { ... } 
/* 替换老旧的 (min-device-pixel-ratio: 2) 语法 */
@media screen and (min-resolution: 2dppx) { ... }

scan 媒体查询

/* 以顺序方式扫描的电视机上应用样式表 */
@media tv and (scan: progressive) { ... }

注意事项与最佳实践

在使用媒体查询和视口单位进行响应式设计时，有一些注意事项和最佳实践需要遵循

  • 避免过度使用媒体查询：过多的媒体查询可能导致样式表的复杂性和维护成本的增加。因此，在设计响应式布局时，应尽量使用简洁、高效的媒体查询规则。
  • 结合使用流式布局和弹性盒子/网格布局：流式布局（使用百分比、em等相对单位）和弹性盒子/网格布局是实现响应式设计的重要手段。结合使用这些布局方式可以更加灵活地调整元素的尺寸和位置。
  • 测试与调试：响应式设计需要考虑到各种设备和屏幕尺寸，因此充分的测试和调试是必不可少的。开发者应使用不同设备和屏幕尺寸进行测试，确保页面在不同设备上都能良好展示。
  • 关注性能优化：过多的CSS规则和复杂的布局可能会导致页面加载速度变慢。因此，在进行响应式设计时，应关注性能优化，避免不必要的计算和渲染。
avatar
文章
阅读
粉丝