css3媒体查询@media的用法(前端css媒体查询详解)

分类：css3知识时间：2022-07-27 07:30:56

浏览器分辨率自适应之CSS媒体查询Media详解

css3媒体查询@media允许我们基于浏览网站的设备的特性来应用不同的样式申明，最常用的特性是视口宽度。通过查询视口宽度，我们可以实现如下功能：站点默认为两列式布局，如果屏幕（适口）宽度超过40em，则变成三列式布局，今天分享前端css媒体查询详解。

1、媒体查询操作方式

实际操作为：对设备提出询问（称作表达式）开始，如果表达式结果为真，媒体查询中的CSS被应用，如果表达式结果为假，媒体查询内的CSS将被忽略。

2、媒体查询结构

@media only screen and (min-width:40em) { 
  body { background-color:blue;} 
}

2.1 @media

以@media开头来表示这是一条媒体查询语句。

2.2 screen

紧跟在@media后面的是一个或者多个表达式，可以判别为真或假。在创建媒体查询时，必须以媒体类型（此处为screen）作为第一个表达式：@media only screen。与媒体类型相对应的有：print（打印机）、braille（盲文）或者all（全部）等其他类型。

2.3 and

and是一个关键字，表示有多个表达式，screen是第一个表达式，and后为另一个表达式。需前后表达式都为真时，整条查询结果才为真（也就是“且”的意思）。与and相对应的关键字有：or、not等。

2.4 (min-width:40em)

and之后的(min-width:40em)为第二个表达式（表达式在小括号内），所有的表达式都应包含在括号内，除非它是只有一个单词的媒体类型表达式（如：screen、print等）。

前缀min-表示“至少”，即“大于等于”的意思。

前缀max-表示“至多”，即“小于等于”的意思。

2.5 ｛｝

花括号里面的内容表示整条媒体查询结果为真时的CSS 样式。

在使用媒体查询时，不要把所有样式都放入媒体查询中。正确做法是先声明适用于所有视口宽度的非媒体查询样式，然后只是用媒体查询去覆盖掉在特定宽度中用到的样式。

body { background-color:green; } 
@media only screen and (min-width:40em) { 
  body {background-color:blue;} 
}

3、在样式表链接中使用媒体查询

4、媒体特性

媒体查询可以查询许多媒体特性，如：视口宽度和高度、屏幕宽度和高度、方向、宽高比和分辨率（屏幕上每个维度上的像素个数）等。

其中大多数都可以加上min-或max-前缀。

4.1 视口宽度和高度（媒体查询中最常用到的设备属性）

视口指的是浏览器窗口中实际包含网页的那部分区域。浏览器窗口减去页面边上的滚动条，以及顶部或底部的工具栏和菜单，剩下的区域就是视口。

4.2 屏幕宽度与高度

@media only screen and (max-device-width:40em) {...}

4.3 方向

值为：横排方向（landscape）竖排方向（portrait）

@media only screen and (orientation:landscape) {...}

4.4 宽高比

常见的显示器宽高比时16:9（如19201080或1366768像素）或者是16:10（1280800）。iphone 3和iphone 4s是3:2（480320和960640），而iPhone 5则是16:9（1136640）。安卓手机通常是4:3、3:2、16:10或16:9。

@media only screen and (min-device-aspect-ratio:16/9) {...}

4.5 分辨率

@media only screen and (resolution:3oodpi) {...}

4.6其他媒体特性

5、浏览器支持

需要担心的浏览器是IE8及其更早版本。

当需要在IE8及其更早版本中使用媒体查询时，我们可以使用条件注释使代码仅针对Internet Explorer。

条件注释也是一种查询，出现在HTML 中，而不是CSS中。

为了让网站能在老版的IE中正确显示，需要使用polyfill或利刃shive脚本。我们所要做的就是下载这个文件，然后在<head>元素中链接他，如：

<!--[if it IE 9]>
<script src="files/html5shiv.js"></script>
<![endif]>-->

除注明外的文章,均为来源:老汤博客,转载请保留本文地址！
原文地址：https://tangjiusheng.com/css3/564.html

大家都在看