The things that move the front end work---the link tab of the front-end authoring article

The meta tag above mentions some of the features to be used in conjunction with the link tag. The link tag on the mobile side is explained in detail below. The link tag is the place where the CSS files are stored, along with some dedicated mobile settings. Combine the following code to illustrate:

<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)"/>

Where the meta tag, mentioned earlier in the

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

These two sets of tags are the exclusive tags of the mobile iOS system. The description means that the page WebApp function is turned on, and clicking the Save to Home screen feature in the tool button below the browser will generate a shortcut icon in the Home screen. Clicking on the icon will webapp the site.

When the Save to Home screen feature is turned on, there will be some link tags to work with. The following link tags are set with this feature.

which
<link rel= "Apple-touch-startup-image" href= "Images/start.jpg"/>
Represents a picture that is displayed when a site is loaded during a click on a shortcut icon that is generated in the home screen. This feature has a good user experience. Avoid the white screen when loading, reduce the user wait for the site loading process of boredom.

The flaw is currently only support vertical screen browsing mode, horizontal screen browsing is not supported.

<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"/>
These three items are different home screen icons that are customized for different versions. Of course not defined can also, when you click on the Home screen, will be the current screen as an icon. The icon that Apple-touch-icon represents is the auto-heightening light icon button. It corresponds to the apple-touch-icon-precomposed. The original design does not heighten the light effect of the icon. According to the actual project situation, choose to use.

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

The link tag here indicates an external style link, but is conditional. This condition is set using media. It indicates that only the handheld device is applied, and the maximum screen width is 480px;

As for media's settings in the Link tab, it's not going to be the beginning. The media label is part of the CSS3. Here is a brief introduction to some of the ways media tags are used:

media_query: [only | not]? <media_type> [and <expression>]
* expression: (<media_feature> [: <value>]?)
Common device Types
all-all device  
screen-computer monitor
handheld-portable Device
print-print paper or print preview
projection-various photographic equipment
TV- TV-type devices

Common device features:
Width | min-width | max-width |
Description: Width of browser window
Height | min-height | max-height |
Description: Height of browser window
Device-width | min-device-width | max-device-width |
Description: The width value of the device screen resolution
Device-height | min-device-height | max-device-height |
Description: The height value of the device screen resolution
Orientation has a value of two portrait|landscape.
Description: Whether the browser window is in portrait or landscape orientation. When the height of the window is greater than or equal to width, it is portrait, otherwise landscape.

1. Query the HTML that the specified media relies on CSS to load
<link href= ' css/480.css ' media= ' only screens and (max-width:480px) ' rel= ' stylesheet ' type= ' text/css ' >

2, query the specified media directly in the CSS itself
@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 relies on CSS
@media (orientation:portrait) {}
@media (orientation:landscape) {}

4. Orientation relies on CSS
<link rel= "stylesheet" media= "All and (orientation:portrait)" href= "Portrait.css" >
<link rel= "stylesheet" media= "All and (Orientation:landscape)" href= "Landscape.css" >

In summary, the role of the media tag is to choose the appropriate CSS style by setting different conditions without using JavaScript.

What moves the front end---the link tab of the front-end production