css媒体查询 @media的用法(自适应布局css媒体查询使用详解)

分类：div+css教程时间：2022-10-03 07:30:01

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

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.cn/divcss/896.html

大家都在看