媒体查询的规则 条件 以及一些常用

CSS媒体查询

内容提纲

1. 响应式设计
2. 媒体查询规则
3. 媒体查询条件
4. 常用的媒体查询

[slide] {:.flexbox.vleft}

响应式设计

如何让你的网站在平板手机电脑上完美展示——响应式设计

目前，越来越多的电子产品都可以用来展示网站，因此，我们遇到的最大的问题就是如何才能在众多的设备中，网站始终如一的展示，下面，我们来学习下如何根据屏幕的大小来设置不同的CSS样式以支持这些设备。

响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同。按照可用的屏幕属性，响应式设计提供了 UI 的最佳效果。

例如，如果网站布局上有一个占据 25% 的屏幕宽度的侧边栏，那么该侧边栏在不同大小的屏幕上的呈现是不同的。该侧边栏在较大的桌面监控器上是宽屏的，在较小的智能手机屏幕上是极其窄的。而在最高的或最小的屏幕上，侧边栏很可能不再是可用的 UI 组件。

有了媒体查询，您就可以编写 CSS，自动将设计更改为提供不同屏幕大小的最佳 UI 体验

[slide] {:.flexbox.vleft}

媒体查询

@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}

设备名的类型

值	描述
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	应用于屏幕阅读器等发声设备

[slide] {:.flexbox.vleft}

选取条件

值	描述
min/max width	定义输出设备中的页面可见区域宽度。
min/max height	定义输出设备中的页面可见区域高度。
min/max device-height	定义输出设备的屏幕可见高度。
min/max device-width	定义输出设备的屏幕可见宽度。
min/max monochrome	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
orientation	定义输出设备中的页面可见区域高度是否大于或等于宽度。
min/max resolution	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan	定义电视类设备的扫描工序。
min/max color	定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0

[slide] {:.flexbox.vleft}

and条件

@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }

仅在宽度为 800 到 1200 像素且方向是纵向时才能激活。（通常，方向仅对能够轻易转换纵横模式的智能手机和平板电脑上是有意义的。）如果其中一个条件为 False，则无法应用媒体查询规则

[slide] {:.flexbox.vleft}

or条件

@media (min-width:800px) or (orientation:portrait) { ... }

如果宽度至少是 800 像素或方向是纵向的，则会应用该规则

[slide] {:.flexbox.vleft}

or条件

@media (not min-width:800px) { ... }