移動前端工做的那些事---前端製做篇之link標籤篇

上文的meta標籤中，提到了部分功能要結合link標籤進行使用。下面詳細的解釋一下移動端的link標籤。link標籤主要是存放CSS文件的地方，同時還有一些專屬的移動端設置在這裏體現。結合如下代碼進行說明：

 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv='Cache-Control' content='no-store' />
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-startup-image" href="images/start.jpg"/>

<link rel="apple-touch-icon" href="images/iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/iphone4.png" />
<link rel="stylesheet" type="text/css" href="print.css"  media="only handheld and (max-width: 480px)"/>

 

其中meta標籤中，上文中曾提到了

<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="apple-mobile-web-app-capable" content="yes" />

    這兩組標籤是移動端IOS系統的專屬標籤。說明的意思是開啓了網頁webapp功能，點擊瀏覽器下面的工具按鈕中的保存至主屏幕功能，會在主屏幕中生成快捷圖標。點擊該圖標就會以webapp的方式瀏覽網站。

 

開啓了保存至主屏幕功能後，相應的會有一些link標籤來進行配合使用。如下link標籤均是配合該功能進行設置的。

其中：
<link rel="apple-touch-startup-image" href="images/start.jpg"/>
表示在點擊主屏幕中生成的快捷圖標後，網站在加載過程當中，顯示的圖片。這個功能用戶體驗很好。避免加載時的白屏，減小用戶等待網站加載過程的煩悶。

缺陷是目前只支持豎屏瀏覽模式，橫屏瀏覽時不支持。

<link rel="apple-touch-icon" href="images/iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/iphone4.png" />
這三項是針對不一樣版本自定義的不一樣的主屏幕圖標。固然不定義也能夠，點擊主屏幕時，會以當前屏幕截圖做爲圖標的。而其中apple-touch-icon表示的該圖標是自動加高光的圖標按鈕。與之相對應的是apple-touch-icon-precomposed。按原設計不加高光效果的圖標。可根據實際項目狀況，選擇使用。

 

<link rel="stylesheet" type="text/css" href="print.css"  media="only handheld and (max-width: 480px)"/>

此處link標籤指明瞭外部的樣式連接，可是有條件的。這個條件就是使用media來進行設置的。它代表的意思是說僅應用在手持設備上，且最大屏幕寬度爲480px;

 

關於media在link標籤中的設置，就不打算開篇再講一次了。media標籤是CSS3中的一部分。在這裏簡單介紹一下media標籤的一些使用方法：

 

media_query: [only | not]? <media_type> [ and <expression> ]
* expression: ( <media_feature> [: <value>]? )
經常使用設備類型
all-全部設備 
screen-電腦顯示器
handheld-便攜設備
print-打印用紙或者打印預覽圖
projection-各類攝影設備
tv -電視類型的設備

經常使用設備特性：
width | min-width | max-width |
說明：瀏覽器窗口的寬度
height | min-height | max-height |
說明：瀏覽器窗口的 高度
device-width | min-device-width | max-device-width |
說明：設備屏幕分辨率的寬度值
device-height | min-device-height | max-device-height |
說明：設備屏幕分辨率的高度值
orientation有兩個值 portrait|landscape。
說明：瀏覽器窗口的方向是縱向仍是橫向。當窗口的高度大於等於寬度時，是portrait，不然爲landscape.

一、查詢指定媒體依賴CSS來負載的HTML
<link href='css/480.css' media='only screen and (max-width: 480px)' rel='stylesheet' type='text/css'>

二、查詢指定媒體直接在CSS自己
@media only screen and (max-width: 768px) { }
@media only screen and (min-width: 480px) { }

@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px)

三、Orientation 依賴CSS
@media (orientation: portrait) { }
@media (orientation: landscape) { }

四、Orientation 依賴CSS
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

總結來講，media標籤的做用就是在不使用javascript的狀況下，經過設定不一樣的條件來有選擇的選用相應的css樣式。