響應式布局頁(yè)面設計，實(shí)現HTML頁(yè)面自動(dòng)使用瀏覽器屏幕大小功能，能夠讓網(wǎng)頁(yè)在PC、平板、手機等客戶(hù)端打開(kāi)的時(shí)候都正常顯示。這里應用到的是Media Queries的功能。

實(shí)現辦法：

一、在HTML頁(yè)面的<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語(yǔ)句表示的意思是：當頁(yè)面的寬度在980px~1441px之間時(shí)，調用的CSS樣式文件是“screen_layout_xlarge.css”?，F在我們來(lái)解釋一下基本的術(shù)語(yǔ)：

1、screen：指的是一種媒體類(lèi)型；

2、and：被稱(chēng)為關(guān)鍵詞，與其相似的還有not,only；

3、（min-width:980px）：這個(gè)就是媒體特性，說(shuō)得通俗一點(diǎn)就是媒體條件。

4、（max-width:1441px）：這個(gè)的理解和第三條是一樣的。

這樣我們就能夠瀏覽器在不同的分辨率下載入不同的CSS文件，從而能讓W(xué)EB頁(yè)面在各種客戶(hù)端打開(kāi)都能顯示出預定的效果。

又如，以下的語(yǔ)句是讓W(xué)EB頁(yè)面在小于或等于600px像素的客戶(hù)端展示時(shí)載入名為“small.css”的CSS文件。

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