学习媒体查询做的笔记。总结一下,借此复习一遍。嗯。<link rel="stylesheet" href="" media="screen">
@mmdia all and (min-width:800px) and (orientation:landscape){ ... }上面两个是媒体查询的例子媒体查询就是对媒体类型和媒体属性表达式求值。如果为真应用样式,为假不应用样式。对于link标签的媒体查询,求值结果为假时样式表会被下载,只是样式不被应用。媒体类型all -- 所有设备。如没有only和not限定可以省略,省略不写时默认为allprint -- 打印机screen -- 计算机屏幕等等and & not & only & 逗号 操作符and -- 所有媒体属性表达式为真时,媒体查询结果才为真。not -- 对媒体结果求值取反。如果有逗号操作符,其作用范围至逗号处为止1. @media not all and (min-width:800px){...}等价于@media not (all and (min-width:800px)){...}而不是@media (not all) and (min-width:800px){...}2. @media not screen and (color), print and (color)等价于@media (not (screen and (color))), print and (color)only -- 防止不支持媒体查询的浏览器错误应用样式。<link rel="stylesheet" href="" media="only screen and (color)" > 不支持媒体查询的浏览器会解析成media=only,只媒体类型没有only,所以不会被不支持媒体查询的浏览器应用样式。而如果不使用only<link rel="stylesheet" href="" media="screen and (color)" >不支持媒体查询的浏览器会解析成media=screen,媒体属性不会求值。从而错误地应用样式。, -- 逗号相当于or(或者)常用媒体属性width : 可视宽度height : 可视高度device-width: 设备宽度device-height: 设备高度orientation: 方向aspect-ratio: 宽高比color: 颜色device-aspect-ratio: 设备宽高比