媒体查询@media学习笔记

发表于 | 更新于 | 分类于

媒体查询

媒体查询@media可以针对不同的屏幕尺寸设置不同的样式，从而实现响应式页面

1
2
3
4
5
/*样式表中的媒体查询*/
@media mediatype and|not|only (media feature) {css-style;}

<!-- link中的媒体查询 -->
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="style.css">

  • mediatype：媒体类型
  • 操作符：and用来合并多个媒体特性，当都匹配时样式生效；not用来排除某种特性的媒体类型，对其他特性的媒体类型样式生效；only指当匹配某种特性的媒体类型样式生效
  • media feature：媒体特性

媒体类型

常用的媒体类型为 all、 screen、 print

  • all：适用于所有设备
  • screen：适用于各种屏幕
  • print：适用于打印预览

其他的媒体类型很多并不常用，或已被废弃

print打印样式

用媒体查询来控制print打印样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@media print {
    * {
        background: transparent;
        color: #000;
        box-shadow: none;
        text-shadow: none;}
    nav,
    aside {
        display: none;}
    body,
    article {
        width: 100%;
        margin: 0;
        padding: 0;}
    a {
        text-decoration: underline;}
}

媒体特性

宽度

min-width

媒体类型大于指定的宽度时，样式生效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container {
    ...
}
@media (min-width: 768px) {
    .container {
        width: 750px;}
}
@media (min-width: 992px) {
    .container {
        width: 970px;}
}
@media (min-width: 1200px) {
    .container {
        width: 1170px;}
}

此为bootstrap中栅格布局，视窗（viewport）宽度在大于等于768px小于992px时，.container的宽度为750px；视窗（viewport）宽度在大于等于992px小于1200px时，.container的宽度为970px；视窗（viewport）宽度在大于等于1200px时，.container的宽度为1170px
当多个min-width同时使用时，尺寸小的在前

max-width

媒体类型小于指定的宽度时，样式生效
当多个max-width同时使用时，尺寸大的在前

min-width与max-width结合使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container {
    ...
@media screen and (min-width: 1200px) {
    .container {
        width: 1170px;}
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .container {
        width: 970px;}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    .container {
        width: 750px;}
}

高度

媒体类型小于或大于指定的宽度时，样式生效，用法同宽度

宽高比（aspect-ratio）

媒体类型为指定宽高比时（水平像素数与垂直像素数的比例），样式生效

1
2
3
4
/*当屏幕为正屏（4:3）时，样式生效*/
@media screen (aspect-ratio: 4/3) {css-style;} 
/*当屏幕为宽屏（16:9）时，样式生效*/
@media screen (aspect-ratio: 16/9) {css-style;}

分辨率（resolution）

媒体类型为指定分辨率时，样式生效，分辨率可以用dpi（图像每英寸面积内的像素点数）或dpcm（图像每厘米面积内的像素点数）来表示

1
2
3
4
/*当屏幕分辨率大于等于326dpi时，样式生效*/
@media screen (min-resolution:326dpi) {css-style;} 
/*当屏幕分辨率大于等于401dpi时，样式生效*/
@media screen (min-resolution:401dpi) {css-style;}

屏幕方向（orientation）

媒体类型为横屏（宽度大于高度）或是竖屏（高度大于宽度）时，样式生效

1
2
3
4
/*当屏幕为竖时，样式生效*/
@media (orientation: portrait) {css-style;}
/*当屏幕为横时，样式生效*/
@media (orientation: landscape) {css-style;}