CSS3媒体查询

css3媒体查询
主要包含两个方面：媒体类型 函数

什么是媒体查询
媒体指的就是各种设备 (移动设备, PC设备) 查询指的是要检测属于哪种设备 媒体查询: 通过查询当前属于哪种设备,
让网页能够在不同的设备下正常的预览

学习媒体查询的核心是什么?
实现页面在不同设备下正常预览 [判断当前设备]

@media all and (min-width:800px)
and (orientation:landscape) {

…//样式

}

解释：

all (所有的设备)
print (打印设备)
screen (电脑屏幕,平板电脑,智能手机)

当逻辑为真的时候，就返回一个布尔值true,此时执行花括号里面的样式

@media not screen and (color),print and (color) <=> @media not screen and (color) or print and (color)

and:与 全部匹配

or:或 匹配一个就可以

not: 非

only:防止老旧的浏览器不支持媒体查询，而应用到给定的样式

css3主要的媒体查询属性：

width:视口的宽度

height:视口的高度

device-width:设备屏幕的宽度

device-height:设备屏幕的高度

orientation:检查设备处于横向还是纵向

aspect-ratio:基于视口宽度和高度的宽高比，如16/9 4/3

color:每种颜色的位数 bits 如min-color: 16位 8位

最常用的是以下4个属性：

width:视口的宽度

height:视口的高度

device-width:设备屏幕的宽度

device-height:设备屏幕的高度

ps:以上的属性都可以添加前缀，比如 min- max-

关于概念的解释：

viewport:视口

视口宽度 和 设备宽度 的区别：

viewport分为三个 即 布局视口 ，可视视口 ，理想视口

布局视口是指先以960px虚拟显示，将网页的布局显示出来

语法：

• 外联式语法：

<link rel="stylesheet" type="text/css" href="01.css" media="only screen and 
(max-width: 420px)">

• 内嵌式语法：

 @media only screen  and (max-width: 420px) {
      	body {
      		background-color: red;
      	}
      }
      
      备注: 多个条件联写
      @media only screen and (width: 320px) and (height: 568px) {}