响应式设计之 —— 媒体查询

媒体查询

媒体查询 = 【媒体(媒介)类型】 + 0/多个表达式【媒体特性】

一、css2中的媒体查询

CSS2中,媒体查询只使用于 /* 【2】 */ /* 计算机屏幕 */ /* => 对纵向放置的显示屏使用该样式 */ /* 对非纵向放置的显示屏使用该样式 */ /* 对视口宽度大于800像素且纵向放置的显示屏使用该样式并且样式应用于所有的投影仪 */

二、css3中的媒体查询

css3中的 media requires Level 3,既可以设置 设备的类型,又可以获取诸如窗口宽度、屏幕方向、分辨率等 媒体特性
  • 媒体特性(媒体属性)如下
width             – 输出设备渲染区域(如可视区域的宽度或打印机纸盒的宽度)的宽度
height            – 输出设备渲染区域(如可视区域的高度或打印机纸盒的高度)的高度
device-width      – 输出设备的宽度(整个屏幕或页的高度,而不是仅是渲染区域)
device-height     – 输出设备的高度(整个屏幕或页的高度,而不是仅是渲染区域)
orientation       – 设备处于横屏(宽度大于高度)模式还是竖屏(高度大于宽度)模式
aspect-ratio      – 输出设备目标显示区域(视口宽高比)的宽高比
device-aspect-ratio – 输出设备的宽高比(设备屏幕的宽高比)
resolution        – 输出设备的分辨率(像素密度) 分辨率单位(dpi, dpcm, dppx)
color             – 检查设备支持多少种颜色等(16、8...)
color-index       – 输出设备中颜色查询表中的条目数量
mono chrome        – 指定了一个黑白(灰度)设备每个像素的比特数
scan              – 检查电视输出设备是顺序扫描还是隔行扫描
grid              – 判断输出设备是网格设备还是位图设备
/* Media Queries Level 4规范中新的媒体特性 */

update            – 根据设备的更新频度区分其类型 (none 如打印机, slow 如电子墨水, fast 正常设备)
scripting         – none 不支持脚本或未启用 | initial-only 仅支持页面初始化脚本 | enabled           – 支持脚本并且已启用
pointer           – 设备交互的精度 (coarse不精确如手指, fine 精确如鼠标, none 无指点)
hover             – 设备是否支持悬停状态

三、使用形式

3.1 基本语法

@media screen {
  body{
    font-size: 14px;
  }
}
@media screen, print {
  body {
     font-size: 20px;
  }
}

@media (width: 30em) {
  nav li {
     display: block;
  }
}

@media screen and (width: 30em) {
  nav li {
     display: block;
  }
}

3.2 嵌套

/*例子1:媒体类型套媒体特性*/
@media screen{
  @media (min-width: 20em) {
      img{

      }
  }
  @media (min-width: 40em) {
      img{

      }
  }
}

/*例子2:媒体特性多层嵌套*/
@media (hover: on-demand) {
    @media (pointer: coarse) {
        input[type=checkbox] ~ label {
            padding: .5em;
        }
    }
    @media (pointer: fine) {
        input[type=checkbox] ~ label {
            padding: .1em;
        }
    }
}

3.3 否定式查询

可以用关键字not表示一个否定查询;not必须置于查询的一开头并会对整条查询串生效,除非逗号分割的多条

@media not screen {
  /* 非屏幕 */
}

@media not print and (min-resolution: 1.5dppx) {
  /*  非屏幕并且最小像素密度不是1.5ppx */
}
@media not (hover: hover), not (pointer: coarse) {
  /* note A 或 not B */
}
/*非法:not不在最前面*/
@media not print and not (min-resolution: 2dppx) {
}

/*非法:not不在最前面*/
@media screen and not (min-resolution: 2dppx) {
}

3.4 与

3.5 only

防止老旧浏览器,因不支持带媒体属性的查询,而应用到了给定的样式。

四、媒体特性(或媒体属性)

4.1 根据媒体特性的范围查询

指定一个固定的宽度通常是没有意义的,更多的情况下,我们需要限定的是类似“小于等于”“大于等于”这样的范围,而大多数媒体特性可以通过添加“max-”“min-”前缀达到上述目的

/*0 至 30em*/
@media (max-width: 30em) {
    nav li {
        display: block;
    }
}

/*30em 至 100em*/
@media (min-width: 30em) and (max-width: 100em)  {
    nav li {
        display: block;
    }
}

4.2 选项式的媒体特性查询

不同于取值连续的范围式查询,很多媒体特性只有几个固定的取值可供选择

/* - portrait  竖屏 */
/* - landscape 横屏 */

@media screen and (orientation: portrait) {
    #logo {
        height: 10vh;
        width: auto;
    }
}
选项式的媒体特性 取值选项 备注
grid 布尔值(使用时直接写成 (grid) 来判断) 是网格设备还是位图设备
hover none, on-demand, hover 是否支持悬停状态
orientation portrait, landscape 设备方向
light-level dim, normal, washed 环境光
pointer none, coarse, fine 设备交互的精度
scripting none, initial-only, enabled 是否支持脚本
update none, slow, normal 根据设备的更新频度区分其类型
scan interlace, progressive 电视输出设备是顺序扫描还是隔行扫描
any-hover none, on-demand, hover can be used to check whether any available input mechanism allows the user to hover over elements
any-pointer none, coarse, fine Presence and accuracy of any pointing device available to the user
inverted-colors none, inverted useragent或OS是否倒置了颜色
overflow-block none, scroll, optional-paged, paged 在block轴方向,当内容超出初始包含块或视口时,设备或浏览器的行为
overflow-inline none, scroll 在inline轴方向,当内容超出初始包含块或视口时,设备或浏览器的行为

五、其他

5.1 引入外部文件时的媒体查询

@import url(typography.css) screen, print;

@import url(hi-res-icons.css) (min-resolution: 1.5dppx), (min-resolution: 96dpi);

5.2 在style标签上的媒体查询

5.3 利用媒体查询实现图片自适应

这里我们使用最新的picture,但是picture在IE上支持并不是很好,因此我们一般都会使用picturefill来进行兼容【具体方法是引入该js文件即可】


    
    

    
    

  
  
  

  
  

5.4 在Javascript中使用媒体查询

var isWideScreen = matchMedia("(min-width: 960px)");
console.log(isWideScreen.matches); //是否匹配 true | false
console.log(isWideScreen.media); //"(min-width: 960px)"
  • 监听媒体的更改
function toggleClass(mq) {
    if (mq.matches) {
        document.body.classList.add('widescreen');
    } else {
        document.body.classList.remove('widescreen');
    }
}
//添加监听
isWideScreen.addListener( toggleClass );
//撤销监听
isWideScreen.removeListener( toggleClass );

你可能感兴趣的:(响应式设计)