网页编辑器

浏览器

多媒体查询语法：@media not|only mediatype and (expressions) {    CSS 代码...;}not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。all: 所有设备例子：在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧。css部分： ul,li{list-style: none;padding:0;margin:0;}        .div1{width: auto;}        #ul1{            position: relative;            margin:30px auto;        }        #ul1 li{            background:gainsboro;            border:1px solid #d4d4d4;            border-radius:4px;            list-style-type:none;            margin:4px;            padding:2px;        }        @media screen and (min-width: 480px) {            .div1 {width:200px;float:left;}            #ul1 li{                background: cadetblue;                color:#fff;            }        }html部分：

CSS3 多媒体类型（mediatype）all：用于所有多媒体类型设备print：用于打印机screen：用于电脑屏幕，平板，智能手机等。speech：用于屏幕阅读器例子：css部分： body {            background-color: darkgray;        }        @media screen and (min-width: 480px) {            body {                background-color: lightsteelblue;            }        }html部分：

重置浏览器窗口查看效果！

如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变。

也可以在不同的媒体上使用不同的样式文件：例子：css：media.cssbody{    background: lightskyblue;    font-size: 16px;}media2.cssbody{    background-color: darkgray;    font-size: 30px;}html：               

600~900像素之间的窗口应用样式