移动前端工做的那些事---前端制做篇之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样式。