响应式设计2---媒体查询基础知识

Posted 2021-04-30 前端CP

建议学习时长： 30分钟
学习方式：深入

学习目标
了解什么时候用媒体查询
知道媒体查询怎么写

详细介绍
CSS媒体查询允许我们根据设备的特性来应用不同的样式申明。如，我们可以让 768px 宽度的设备(ipad) 及以上屏幕内容显示4列，768px 以下的显示 1列。

语法
以@media开头来表示这是一条媒体查询语句。@media后面的是一个或者多个表达式，如果表达式为真，则应用样式。如

@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}

上面的代码在屏幕宽度小于 600px 的时候，会作用大括号里的内容。

媒体查询可以在 link标签上加media属性或css文件中使用。

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

媒体查询语句结构
由媒体类型 +一到多个CSS属性判断组成，而多个CSS属性判断可以用关键字and连接。媒体类型是可选的，默认是全部（all）。

@media screen and (min-width:1024px) and (max-width:1280px) and (animation){
  body{font-size:medium;}
}

max与min
他们是要配合支持它们的属性使用的,如：

@media (min-width:1000px) and (min-device-width:1500px){
  body{font-size:medium;}
}

逻辑操作符
操作符 not，and 和 only 可以用来构建复杂的媒体查询。
and 操作符用来把多个 媒体属性 组合起来，合并到同一条媒体查询中。只有当每个属性都为
真时，这条查询的结果才为真。
not 操作符用来对一条媒体查询的结果进行取反。
only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。
注意：若使用了 not 或 only 操作符，必须明确指定一个媒体类
型。

media query支持的属性

webkit浏览器对media query支持的属性

• transform-2d 只用于支持使用 -webkit-transform实现2D变换的浏览器

• transform-3d 只用于支持使用 -webkit-transform实现3D变换的浏览器

• transition 只用于支持使用-webkit-transition实现变换效果的浏览器

• animation 只用于支持使用-webkit-animation实现动画的浏览器

媒体类型(media type)列表
all 所有设备
braille 盲文
embossed 盲文打印
handheld 手持设备
print 文档打印或打印预览模式
projection 项目演示，比如幻灯
screen 彩色电脑屏幕
speech 演讲
tty 固定字母间距的网格的媒体，比如电传打字机
tv 电视
实例
android手机的多分辨率问题
android系统的开放性导致其终端的多样性，那么对于各种各样的android手机来说，屏幕分辨率的差异导致针对android手机的页面重构复杂性增加，那么我们可以用media query为每种分辨率提供特定样式：

/* for 240 px width screen */@media only screen and (max-device-width:240px){
    selector{
    }
}

/* for 360px width screen */@media only screen and (min-device-width:241px) and (max-device-width:360px){
    selector{
    }
}

/* for 480 px width screen */@media only screen (min-device-width:361px)and (max-device-width:480px){
    selector{
    }
}

device-aspect-ratio
device-aspect-ratio可以用来适配特定屏幕长宽比的设备，这也是一个很有用的属性，比如，我们的页面想要对长宽比为4:3的普通屏幕定义一种样式，然后对于16:9和16:10的宽屏，定义另一种样式，比如自适应宽度和固定宽度：

/* for 4:3 screen */@media only screen and (device-aspect-ratio:4/3){
    selector{
    }
}

/* for 16:9 and 16:10 screen */@media only screen and (device-aspect-ratio:16/9) and (device-aspect-ratio:16/10){
    selector{
    }
}