媒体查询

媒体查询能在不同条件下使用不同的样式，使页面在不同设备下达到不同的效果。

viewport

手机是在电脑之后出现的，早起网页设置没有考虑手机。使用viewport可以将手机物理分辨率转换为浏览器分辨率。

viewport是虚拟窗口，虚拟窗口大于手机的屏幕尺寸，手机端浏览器将网页放在这个大大虚拟窗口中，我们可以拖动屏幕看到网页的其他部分。

但有些时候需要控制viewport虚拟窗口的尺寸或者初始大小，就要掌握viewport知识。

媒体设备

下面是常用的媒体类型，当然主要使用的还是screen

选项	说明
all	所有媒体类型
screen	用于电脑屏幕、平板电脑、智能手机
print	打印设备
speech	应用于屏幕阅读器等发声设备

• 使用link与style中定义媒体查询

• 使用@import url(screen.css) screen形式媒体使用的样式

• 可以用逗号分隔同时支持多个媒体设备

• 未指定媒体设备时等同于all

•   <style media="screen"></style>

link

在link标签中通过media属性可以设置样式使用的媒体设备

• common.css 没有指定媒体所以全局应用
• screen.css 应用在屏幕设备
• print.css 应用在打印设备

 <link rel="stylesheet" href="common.css">
 <link rel="stylesheet" href="screen.css" media="screen">
 <link rel="stylesheet" href="print.css" media="print">

@import

使用@import可以引入指定设备的样式规则。文件中引入一个样式文件，在这个文件中再引入其他媒体的样式文件。

<link rel="stylesheet" href="style.css">

//style.css
@import url(screen.css) screen;
@import url(print.css) print;

@media

使用@media做更细节的控制

<style>
@media screen{
	h1{
	font-size: 3em;
	color:blue;
	}
}
</style>

多设备支持

可以用逗号分隔同时支持多个媒体设备

@import url(screen.css) screen,print;
<link rel="stylesheet" href="screen.css" media="screen,print">