媒体查询
媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由 媒体类型和一个或多个检测媒体特性的条件表达式组成。
媒体查询中可用于检测的媒体特性有 width 、 height 和 color 等。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备。
响应式设计需要使用媒体查询,如果没有CSS3的媒体查询模块,就不能针对设备特性(如视口宽度)设置特定的CSS样式定制显示效果。
一、如何写媒体查询
(1) 可以直接在link中判断设备的尺寸,然后引用不同的css文件
- 在上面的例子中
all是媒体类型里的一种。
and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备);
(min-width: 1024px) 就是媒体特性,其被放置在一对圆括号中。
- 常用的屏幕范围:
<=767px 手机
>=768px 平板
>=1024px 电脑
(2)也可以直接写在style标签里
@media all and (min-width:1024px){/*样式*/}
二、媒体类型
值 | 描述 |
---|---|
all | 用于所有设备 |
用于打印机和打印预览 | |
screen | 用于电脑屏幕,平板电脑,智能手机等。 |
speech | 应用于屏幕阅读器等发声设备 |
三、媒体的特性
仅列出几个常用的媒体特性
值 | 描述 |
---|---|
device-height | 定义输出设备的屏幕可见高度。 |
device-width | 定义输出设备的屏幕可见宽度。 |
height | 定义输出设备中的页面可见区域高度。 |
max-device-height | 定义输出设备的屏幕可见的最大高度。 |
max-device-width | 定义输出设备的屏幕最大可见宽度。 |
max-height | 定义输出设备中的页面最大可见区域高度。 |
max-width | 定义输出设备中的页面最大可见区域宽度。 |
min-device-width | 定义输出设备的屏幕最小可见宽度。 |
min-device-height | 定义输出设备的屏幕的最小可见高度。 |
min-height | 定义输出设备中的页面最小可见区域高度。 |
min-width | 定义输出设备中的页面最小可见区域宽度。 |
scan | 定义电视类设备的扫描工序。 |
width | 定义输出设备中的页面可见区域宽度。 |
手机自适应
写在HTML文件<head>标签里。
<meta name="viewport ,content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
- name="viewport" 指视口
- width=device-width——宽度等于当前设备的宽度
- initial-scale=1.0——初始的缩放比例(默认为1)
- maximum-scale=1.0——允许用户缩放到得最大比例(默认为1)
- user-scalable=no——用户不能手动缩放
强制性兼容
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
IE浏览器兼容(IE5 IE6):
[if !IE]
[endif]