queries 放在哪里

转载

架构设计师之光 2024-07-16 21:17:45

文章标签 queries 放在哪里媒体查询操作符样式表 文章分类 架构后端开发

Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的页面效果。Media Queries有其自己的使用规则。
一个媒体查询由一个可选的媒体类型和媒体特性表达式，使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。

link元素中的CSS媒体查询 
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
样式表中的CSS媒体查询 
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

逻辑操作符

not、and和only

and操作符用来把多个媒体属性组合成一条媒体查询，对成链式的特征进行请求
not操作符用来对一条媒体查询的结果进行取反。
only操作符仅在媒体查询匹配成功的情况下被用于应用一个样式，
若使用了not或only操作符，必须明确指定一个媒体类型。

@media tv and (min-width: 700px) and (orientation: landscape) { ... }
//媒体查询仅在可视区域宽度不小于700像素并在横屏时有效，可以使用 and 操作符合并媒体属性

@media (min-width: 700px), handheld and (orientation: landscape) { ... }
//逗号分隔列表,在最小宽度为700像素或是横屏的手持设备上应用一组样式

@media not all and (monochrome) { ... }
//not 关键字应用于整个媒体查询，在媒体查询为假时返回真

最大宽度max-width,最小宽度min-width

“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

//“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

@media screen and (min-width:900px){
.wrapper{width: 980px;}
}