1 多媒体查询
1.1 响应式网页概念
同⼀个网页根据窗口大小的不同,显示不同的版式。
1.2 优缺点
优点:对于不同视⼝都可以显示⾮常饱满的⽹⻚结构,没有横向滚动条。
缺点:制作复杂,同时对于移动端⽽⾔,需要加载⾮常多的 pc 端的样式和图⽚等资源,影响加载速度,同时费流量。国内流量⾮常贵。(这也是国内纯响应式⽹站不多的原因。)
1.3 原理
媒体查询能在不同的条件下使⽤不同的样式,使⻚⾯在不同在终端设备下达到不同的渲染效果。
1.4 媒体设备
值 | 描述 |
---|---|
all | 用于所有多媒体类型设备 |
用于打印机 | |
screen | 用于电脑屏幕,平板,智能手机等。 |
speech | 用于屏幕阅读器 |
比如:在屏幕显示与打印设备上不同的 CSS 效果
-
media 媒体
-
screen 屏幕
-
min-width 最⼩值,视⼝⼤于或者等于该值加载这个 css
-
max-width 最⼤值,视⼝⼩于或者等于该值加载这个 css
<style media="screen"> h1 { font-size: 32px; color: #ff0000; } </style> <style media="print"> h1 { font-size: 32px; color: #00ff00; } </style> <h1>www.yunhe.cn</h1> <hr> <h2>云和数据</h2>
多设备支持:可以⽤逗号分隔同时⽀持多个媒体设备
@import url(screen.css) screen,print; <link href="screen.css" media="screen,print"> @media screen,print {...}
1.5 实现方式
1.5.1 外链式
在 link 标签中通过 media 属性可以设置样式使⽤的媒体设备。
-
common.css 没有指定媒体所以全局应⽤
-
screen.css 应⽤在屏幕设备
-
print.css 应⽤在打印设备
<!-- 视⼝⼤于或者等于 1200px 加载 1.css--> <link rel="stylesheet" type="text/css" href="css/01.css" media="screen and (min-width:1200px)"> <!-- 视⼝⼩于 1200px 加载 2.css --> <link rel="stylesheet" type="text/css" href="css/02.css" media="screen and (max-width:1199px)">
注意:
-
IE8 不兼容 media
-
简化代码,相同样式写在⼀起。
-
利⽤层叠性,写在后⾯。
1.5.2 导入式
使⽤ @import 可以引⼊指定设备的样式规则。⽂件中引⼊⼀个样式⽂件,在这个⽂件中再引⼊其他媒体的样式⽂件。
<link rel="stylesheet" href="style.css">
style.css
@import url(screen.css) screen; @import url(print.css) print;
1.5.3 内嵌式
<style> /* 宽度大于等于 1200px */ @media screen and (min-width: 1200px) { p { float: left; width: 50%; height: 200px; background-color: #ff0000; } } /* 宽度小于等于 1199px */ @media screen and (max-width: 1199px) { p { float: left; width: 50%; height: 200px; background-color: #00ff00; } } /* 宽度大于等于 640px 小于等于 1000px */ @media screen and (min-width: 640px) and (max-width: 1000px) { p { float: left; width: 50%; height: 200px; background-color: #0000ff; } } </style> <p></p>
1.6 设备方向
使⽤ orientation 属性可以定义设备的⽅向
值 | 描述 |
---|---|
portrait | 竖屏设备即⾼度⼤于宽度 |
landscape | 横屏设备即高度小于宽度 |
<style media="screen and (min-width: 768px),screen and (orientation:landscape)"> body { background: #ff0000; } </style>
1.7 查询条件
可以使⽤不同条件限制使⽤的样式,条件表达式需要放在扩号中
1.7.1 逻辑与
需要满⾜多个条件时才使⽤样式,多个条件使⽤ and 连接。表示满足全部条件才能生效。
<style> /* 横屏显示且屏幕宽度不超过 600px */ @media screen and (orientation: landscape) and (max-width : 600px) { body { background: #8e44ad; } } </style>
1.7.2 逻辑或
多个 或 条件查询使⽤逗号连接,不像其他程序中使⽤ or 语法。表示只要满足其中一个条件就能生效。
<style> /* 横屏显示 或者 屏幕宽度不超过 600px */ @media screen and (orientation: landscape),screen and (max-width : 600px) { body { background: #8e44ad; } } </style>
1.7.3 不应用
not 表示不应⽤样式,即所有条件都满⾜时不应⽤样式。
注意:必须将 not 写在查询的最前⾯
<style> /* 横屏显示且屏幕宽度不超过 600px 时不应用当前样式 */ @media not screen and (orientation: portrait) and (max-width:600px) { body { background: #8e44ad; } } </style>
1.7.4 仅当前应用
only 指定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。
<style> /* 仅电脑屏幕,平板,智能手机以及横屏显示且屏幕宽度不超过 600px 时应用当前样式 */ @media only screen and (orientation: portrait) and (max-width:600px) { body { background: #8e44ad; } } </style>
1.8 查询特性
根据查询特性筛选出使⽤样式的设备。
1.8.1 常⽤特性
特性 | 说明 |
---|---|
orientation: landscape | portrait | landscape 横屏,portrait 竖屏 |
width | 设备宽度 |
height | 设备⾼度 |
min-width | 最⼩宽度 |
max-width | 最⼤宽度 |
min-height | 最⼩⾼度 |
max-height | 最⼤⾼度 |
1.8.2 使⽤示例
在设备宽度为 568px 时使⽤样式
@media only screen and (width:568px) { ... }
在设备不⼩于 569px 时使⽤样式
@media only screen and (min-width:569px) { ... }
橫屏设备并且宽度⼤于 569px 时使⽤样式
@media only screen and (orientation: landscape) and (min-width:569 px) { ... }