CSS媒体查询

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Bootstrap中的CSS媒体查询 需要配合bootstrap 使用 否则用不了

使用媒体查询，你可以针对不同的媒体类型定义不同的样式。 媒体查询可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面

一般作用于响应式的页面

@media not|only mediatype(媒体类型) and (expressions 媒体功能) 

        {    CSS 代码 }

 

参数：

not：是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。 only: 用来指定某种特别的媒体类型。对于支持Media Queries 的移动设备来说，如 果存在 only 关键字，移动设备的 Web 浏览器会忽略 only 关键字并直接根据后面的表达式 应用样式文件。对于不支持 Media Queries 的设备但能够读取 Media Type 类型的 Web 浏览器，遇到 only 关键字时会忽略这个样式文件。 all: 所有设备，这个应该经常看到。

 

并且CSS3有多种不同的媒体内容内容，见截图

 

但是每一种都对应着不同的方式使用

但大多数时候媒体功能都是重复的

例如

aspect-ratio 定义输出设备中的页面可见区域宽度与高度的比率

color 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则 值等于 0

color-index 定义在输出设备的彩色查询表中的条目数。如果没有使用彩 色查询表，则值等于 0 device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。

device-height 定义输出设备的屏幕可见高度。

@media not|only mediatype(媒体类型) and (expressions 媒体功能)  { CSS 代码...;  }

device-width 定义输出设备的屏幕可见宽度。

grid 用来查询输出设备是否使用栅格或点阵。 height 定义输出设备中的页面可见区域高度。

max-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。

这些大多数都是用在电子设备中使用

并且可以多种配合比如弹性盒子等

弹性盒子

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

• 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
• 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
• 弹性容器内包含了一个或多个弹性子元素。

注意：

• 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
• 弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

      

媒体查询可以配合多种元素一起使用但是具体使用因人而异

附件

媒体功能 单表

 

并且这些媒体查询可以与源代码叠加使用，所以可以用多种方法来改写效果

     也有效果差不多的栅格布局，但在使用方面是完全不一样的栅格布局是针对网页（手机）大小/分辨率而改变 媒体查询是针对设备而改变

 

初来乍到，请多多指教，大神勿喷。