Comments: This article introduces how to use HTML5 to add websites to windows8. For more information, see
First of all, let's take a look at the windows 8 stickers. In windows 8, the Metro application can well split the screen. For example:
This allows you to easily switch between instances during use. The system also has rigid rules on posting. A maximum of two screens, one large and one small. The width of the small screen is fixed to 320 pixels.
Therefore, when you paste a website into a small screen, the page is scaled down by default. For example:
So how can this problem be solved well? What kind of friendly effect does the website display on a small screen on windows 8? Below is a simple example.
A simple and traditional page, including horizontally arranged navigation and content.
The same is true for traditional code.
The Code is as follows:
<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Style>
. Nav {
Padding: 5px 0px 5px 0px;
Margin: 0px;
Width: 100%;
List-style-type: none;
Background-color: # cddcd6;
Height: 28px;
}
. Nav li {
Margin: 0px 1px 0px 0px;
Float: left;
Background-color: # 0094ff;
Padding: 5px 10px 5px 10px;
}
. DvItem {
Width: 100%;
Height: 400px;
Background-color: # b6ff00;
Clear: both;
}
. Main {
Width: 960px;
Margin: 0px auto 0px auto;
}
</Style>
</Head>
<Body>
<Div class = "main">
<Ul class = "nav">
<Li> Home </li>
<Li> Item1 </li>
<Li> Item2 </li>
<Li> Item3 </li>
<Li> Item4 </li>
</Ul>
<Div class = "dvItem">
</Div>
</Div>
</Body>
</Html>
The effect of such a page is reduced:
How to modify it? In this traditional page, we only need to compile a CSS based on the features of windows 8 so that the page can be laid out and displayed in a 320 pixel width.
The implementation code is as follows: add the following style code to the original page
The Code is as follows:
@ Media screen and (max-width: 320px ){
@-Ms-viewport {width: 320px ;}
. Nav {
Padding: 5px 0px 5px 0px;
Margin: 0px;
Width: 100%; background-color: # fff;
}
. Nav li {
Width: 300px;
Clear: both;
Margin: 0px 0px 1px 0px;
Background-color: # 0094ff;
Padding: 5px 0px 5px 0px;
}
. DvItem {
Width: 95%;
Height: 600px;
Background-color: # ff00a4;
Clear: both;
}
. Main {
Width: 320px;
Margin: 0px auto 0px auto;
}
}
There is no difference between full-screen browsing and traditional browsing.
The difference is that it is obvious to stick him to a small screen, such as the display effect.
Download/Files/risk/Index.rar in this example.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
