CSS3 多媒体查询

时间  2019-11-12
标签 css3 css 多媒体 查询 栏目 CSS 繁體版
原文   原文链接

CSS2 多媒体类型

@media 规则在 CSS2 中有介绍，针对不一样媒体类型能够定制不一样的样式规则。css

例如：你能够针对不一样的媒体类型(包括显示器、便携设备、电视机，等等)设置不一样的样式规则。html

可是这些多媒体类型在不少设备上支持还不够友好。html5

CSS3 多媒体查询

CSS3 的多媒体查询继承了 CSS2 多媒体类型的全部思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。android

媒体查询可用于检测不少事情，例如：web

  • viewport(视窗) 的宽度与高度
  • 设备的宽度与高度
  • 朝向 (智能手机横屏，竖屏) 。
  • 分辨率

目前不少针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。chrome

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。express

属性 http://www.runoob.com/images/compatible_chrome.gif http://www.runoob.com/images/compatible_edge.gif http://www.runoob.com/images/compatible_firefox.gif http://www.runoob.com/images/compatible_safari.gif http://www.runoob.com/images/compatible_opera.gif
@media 21.0 9.0 3.5 4.0 9.0

多媒体查询语法

多媒体查询由多种媒体组成，能够包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。浏览器

@media not|only mediatype and (expressions) { CSS 代码...; }cookie

若是指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果。网络

除非你使用了 not 或 only 操做符，不然全部的样式会适应在全部设备上显示效果。

  • not: not是用来排除掉某些特定的设备的，好比 @media not print（非打印设备）。

  • only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来讲，若是存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但可以读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。

  • all: 全部设备，这个应该常常看到。

你也能够在不一样的媒体上使用不一样的样式文件：

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

媒体类型

值 描述
all 用于全部设备
aural 已废弃。用于语音和声音合成器
braille 已废弃。 应用于盲文触摸式反馈设备
embossed 已废弃。 用于打印的盲人印刷设备
handheld 已废弃。 用于掌上设备或更小的装置，如PDA和小型电话
print 用于打印机和打印预览
projection 已废弃。 用于投影设备
screen 用于电脑屏幕，平板电脑，智能手机等。
speech 应用于屏幕阅读器等发声设备
tty 已废弃。 用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备
tv 已废弃。 用于电视和网络电视

媒体功能

值 描述
aspect-ratio 定义输出设备中的页面可见区域宽度与高度的比率
color 定义输出设备每一组彩色原件的个数。若是不是彩色设备，则值等于0
color-index 定义在输出设备的彩色查询表中的条目数。若是没有使用彩色查询表，则值等于0
device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。
device-height 定义输出设备的屏幕可见高度。
device-width 定义输出设备的屏幕可见宽度。
grid 用来查询输出设备是否使用栅格或点阵。
height 定义输出设备中的页面可见区域高度。
max-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
max-color 定义输出设备每一组彩色原件的最大个数。
max-color-index 定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height 定义输出设备的屏幕可见的最大高度。
max-device-width 定义输出设备的屏幕最大可见宽度。
max-height 定义输出设备中的页面最大可见区域高度。
max-monochrome 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution 定义设备的最大分辨率。
max-width 定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio 定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color 定义输出设备每一组彩色原件的最小个数。
min-color-index 定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width 定义输出设备的屏幕最小可见宽度。
min-device-height 定义输出设备的屏幕的最小可见高度。
min-height 定义输出设备中的页面最小可见区域高度。
min-monochrome 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution 定义设备的最小分辨率。
min-width 定义输出设备中的页面最小可见区域宽度。
monochrome 定义在一个单色框架缓冲区中每像素包含的单色原件个数。若是不是单色设备，则值等于0
orientation 定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution 定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan 定义电视类设备的扫描工序。
width 定义输出设备中的页面可见区域宽度。

多媒体查询简单实例

使用多媒体查询能够在指定的设备上使用对应的样式替代原有的样式。

如下实例中在屏幕可视窗口尺寸大于 480 像素的设备上修改背景颜色:

实例

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

如下实例在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧：

实例

@media screen and (min-width: 480px) {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left:216px;}
}

一个完整的例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>菜鸟教程(runoob.com)</title> 
<style>
ul {
    list-style-type: none;
}

ul li a {
    color: green;
    text-decoration: none;
    padding: 3px; 
    display: block;
}

@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }
}

@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}

@media screen and (min-width: 1001px) {
    ul li a:after {
        content: " (" attr(data-email) ")";
        font-size: 12px;
        font-style: italic;
        color: #666666;
    }
}
</style>
</head>
<body>

<h1>重置浏览器窗口，查看效果!</h1>

<ul>
  <li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>
  <li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li>
  <li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>
</ul>

</body>
</html>

从上面咱们能够看出有几个临界点的分辨率，那么咱们就能够轻松的来写本身的自适应代码了

@media (min-width: 768px){ //>=768的设备 }

@media (min-width: 992px){ //>=992的设备 }

@media (min-width: 1200){ //>=1200的设备 }

注意下顺序，若是你把@media (min-width: 768px)写在了下面那么很悲剧，

@media (min-width: 1200){ //>=1200的设备 }

@media (min-width: 992px){ //>=992的设备 }

@media (min-width: 768px){ //>=768的设备 }

由于若是是1440,因为1440>768那么你的1200就会失效。

因此咱们用min-width时，小的放上面大的在下面，同理若是是用max-width那么就是大的在上面，小的在下面

@media (max-width: 1199){ //<=1199的设备 }

@media (max-width: 991px){ //<=991的设备 }

@media (max-width: 767px){ //<=768的设备 }

HTML5 <meta>

定义和用法

<meta> 元素可提供有关页面的元信息（meta-information），好比针对搜索引擎和更新频度的描述和关键词。

<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

HTML 4.01 与 HTML 5 之间的差别

在 HTML 5 中，再也不支持 scheme 属性。

在 HTML 5 中，有一个新的 charset 属性，它使字符集的定义更加容易。

在 HTML 4.01 中，不得不这么写：

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

在 HTML 5 中，这样就够了：

<meta charset="ISO-8859-1">

提示和注释

提示：请使用 CSS 来定义列表的类型。

例子

定义针对搜索引擎的关键词：

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />

定义对页面的描述：

<meta name="description" content="免费的 web 技术教程。" />

定义页面的最新版本：

<meta name="revised" content="David, 2008/8/8/" />

每 5 秒刷新一次页面：

<meta http-equiv="refresh" content="5" />

属性

属性 值 描述 4 5
charset character encoding 定义文档的字符编码。   5
content some_text 定义与 http-equiv 或 name 属性相关的元信息。 4 5
http-equiv
  • content-type
  • expires
  • refresh
  • set-cookie
 把 content 属性关联到 HTTP 头部。 4 5
name
  • author
  • description
  • keywords
  • generator
  • revised
  • others
 把 content 属性关联到一个名称。 4 5
scheme some_text 定义用于翻译 content 属性值的格式。不支持。 4  

标准属性

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, 
lang, ref, registrationmark, tabindex, template, title

如需完整的描述，请访问 HTML 5 中标准属性。

事件属性

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, 
ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, 
ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, 
onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, 
onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

如需完整的描述，请访问 HTML 5 中事件属性。

-------------------------------------------------------------------------------------------------------------------------------------------------------

viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 容许用户缩放到的最小比例
maximum-scale - 容许用户缩放到的最大比例
user-scalable - 用户是否能够手动缩放

viewport 语法介绍：

01 <!-- html document -->
02 <meta name="viewport"
03     content="
04         height = [pixel_value | device-height] ,
05         width = [pixel_value | device-width ] ,
06         initial-scale = float_value ,
07         minimum-scale = float_value ,
08         maximum-scale = float_value ,
09         user-scalable = [yes | no] ,
10         target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
11     "
12 />

width

控制 viewport 的大小，能够指定的一个值或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

height

和 width 相对应，指定高度。

target-densitydpi

一个屏幕像素密度是由屏幕分辨率决定的，一般定义为每英寸点的数量（dpi）。Android支持三种屏幕像素密度：低像素密度，中像素密度，高像素密度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。

下面是 target-densitydpi 属性的 取值范围

  • device-dpi –使用设备本来的 dpi 做为目标 dp。 不会发生默认缩放。
  • high-dpi – 使用hdpi 做为目标 dpi。 中等像素密度和低像素密度设备相应缩小。
  • medium-dpi – 使用mdpi做为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是默认的target density.
  • low-dpi -使用mdpi做为目标 dpi。中等像素密度和高像素密度设备相应放大。
  • <value> – 指定一个具体的dpi 值做为target dpi. 这个值的范围必须在70–400之间。
1 <!-- html document -->
2 <meta name="viewport" content="target-densitydpi=device-dpi" />
3 <meta name="viewport" content="target-densitydpi=high-dpi" />
4 <meta name="viewport" content="target-densitydpi=medium-dpi" />
5 <meta name="viewport" content="target-densitydpi=low-dpi" />
6 <meta name="viewport" content="target-densitydpi=200" />

为了防止Android Browser和WebView 根据不一样屏幕的像素密度对你的页面进行缩放，你能够将viewport的target-densitydpi 设置为 device-dpi。当你这么作了，页面将不会缩放。相反，页面会根据当前屏幕的像素密度进行展现。在这种情形下，你还须要将viewport的width定义为与设备的width匹配，这样你的页面就能够和屏幕相适应。

initial-scale

初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，若是你设置初始缩放为“1.0”，那么，web页面在展示的时候就会以target density分辨率的1:1来展示。若是你设置为“2.0”，那么这个页面就会放大为2倍。

maximum-scale

最大缩放。即容许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，若是你将这个值设置为“2.0”，那么这个页面与target size相比，最多能放大2倍。

user-scalable

用户调整缩放。即用户是否能改变页面缩放程度。若是设置为yes则是容许用户对其进行改变，反之为no。默认值是yes。若是你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，由于根本不可能缩放。

全部的缩放值都必须在0.01–10的范围以内。

例：

(设置屏幕宽度为设备宽度，禁止用户手动调整缩放)

 <meta name="viewport" content="width=device-width,user-scalable=no" />

(设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放)

<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程