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

 分类:css3知识时间:2022-07-27点击:

浏览器分辨率自适应之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、在样式表链接中使用媒体查询

<link rel="stylesheet" href="styles/mainstyles.css">此样式表表示应用于所有设备

<link rel="stylesheet" href="styles/widerscreen.css" media="only and (min-width:40em)">表示仅在查询结果为真(视口宽度大于等于40em)时应用的设备。


4、媒体特性

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

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


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

  • 视口宽度:width

  • 视口高度:height

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


4.2 屏幕宽度与高度

  • 屏幕宽度:device-width

  • 屏幕高度:device-height

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


4.3 方向

  • 方向:orientation

值为:横排方向(landscape)竖排方向(portrait)

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


4.4 宽高比

  • 视口宽高比:aspect-ratio

  • 设备屏幕宽高比:device-aspect-ratio

常见的显示器宽高比时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 分辨率

  • 设备屏幕的分辨率:resolution

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


4.6其他媒体特性

  • color

  • color-index

  • monochrome

  • scan

  • grid


5、浏览器支持

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

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

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

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

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


除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: