响应式布局页面设计_Html教程_奇迪科技(深圳)有限公司(www.qvdv.net)

响应式布局页面设计，实现HTML页面自动使用浏览器屏幕大小功能，能够让网页在PC、平板、手机等客户端打开的时候都正常显示。这里应用到的是Media Queries的功能。

实现办法：

一、在HTML页面的<header></header>内插入如下的代码：

<link rel="stylesheet" type="text/css" media="only screen and (min-width:980px) and (max-width:1441px)" href="css/screen_layout_xlarge.css">

上面的media语句表示的意思是：当页面的宽度在980px~1441px之间时，调用的CSS样式文件是“screen_layout_xlarge.css”。现在我们来解释一下基本的术语：

1、screen：指的是一种媒体类型；

2、and：被称为关键词，与其相似的还有not,only；

3、（min-width:980px）：这个就是媒体特性，说得通俗一点就是媒体条件。

4、（max-width:1441px）：这个的理解和第三条是一样的。

这样我们就能够浏览器在不同的分辨率下载入不同的CSS文件，从而能让WEB页面在各种客户端打开都能显示出预定的效果。

又如，以下的语句是让WEB页面在小于或等于600px像素的客户端展示时载入名为“small.css”的CSS文件。

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />