【转】移动前端工作的那些事---前端制作篇之link标签篇
首先感谢原作者：webApp赵海洋
附上文章原地址：移动前端工作的那些事---前端制作篇之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.
1、查询指定媒体依赖CSS来负载的HTML
<link href='css/480.css' media='only screen and (max-width: 480px)' rel='stylesheet' type='text/css'>
2、查询指定媒体直接在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)
3、Orientation 依赖CSS
@media (orientation: portrait) { } @media (orientation: landscape) { }
4、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样式。
首先感谢原作者：webApp赵海洋
附上文章原地址：移动前端工作的那些事---前端制作篇之link标签篇
