CSS3媒体查询@media功能使用总结 | GCidea's blog
目录1. 前言2. 示例3. 语法4. 媒体功能
前言 媒体查询包含一个可选的媒体类型和零或多个表达式来限制使用媒体特性的样式表范围,这些表达式会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备的类型以及所有的表达式的值都是true,那么该媒体查询的结果就是true。例如width,height,color。CSS3中的Media queries让内容的呈现可以只针对特定范围的输出设备而不必去改变内容本身。
示例1234567891011<!-- link元素中的CSS媒体查询 --><link rel="stylesheet" media="(max-width: 600px)" href="example.css" /><!-- 样式表中的CSS媒体查询 --><style>@media (max-width: 600px) { .facet_sidebar { display: none; }}</style>解释:
当媒体查询是true时,其相应的样式表或样式规则就会被应用。比如上面的写法表示,当设备宽度在600px以内,就会...阅读全文
前言 媒体查询包含一个可选的媒体类型和零或多个表达式来限制使用媒体特性的样式表范围,这些表达式会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备的类型以及所有的表达式的值都是true,那么该媒体查询的结果就是true。例如width,height,color。CSS3中的Media queries让内容的呈现可以只针对特定范围的输出设备而不必去改变内容本身。
示例1234567891011<!-- link元素中的CSS媒体查询 --><link rel="stylesheet" media="(max-width: 600px)" href="example.css" /><!-- 样式表中的CSS媒体查询 --><style>@media (max-width: 600px) { .facet_sidebar { display: none; }}</style>解释:
当媒体查询是true时,其相应的样式表或样式规则就会被应用。比如上面的写法表示,当设备宽度在600px以内,就会...阅读全文