Comentário: O editor deste artigo apresentará a você como usar o HTML5 para obter o apoio de sites no Windows 8. Se você precisar, consulte
Primeiro, vamos aprender sobre o suporte do Windows 8. Os aplicativos do Metro no Windows 8 podem dividir muito bem a tela. A figura a seguir
Isso permite que os usuários alternem com muita facilidade durante o uso. O sistema também possui regulamentos rígidos sobre apego. No máximo duas telas, uma é grande e a outra é pequena. E a largura da tela pequena é fixada em 320 pixels.
Portanto, quando os usuários postam o site em uma tela pequena, a página é reduzida em proporção por padrão. Como mostrado na figura abaixo:
Então, como podemos resolver esse problema muito bem? Que tal fazer o site mostrar um efeito muito amigável na tela pequena do Windows 8? Abaixo eu tenho um exemplo simples
Conforme mostrado na imagem, uma página muito simples e tradicional, incluindo navegação, conteúdo etc. organizados horizontalmente, etc.
E o mesmo vale para o código tradicional
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title> </title>
<estilo>
.nav {
preenchimento: 5px 0px 5px 0px;
margem: 0px;
largura: 100%;
Tipo no estilo de lista: nenhum;
Background-Color: #CDDCD6;
Altura: 28px;
}
.nav li {
margem: 0px 1px 0px 0px;
flutuar: esquerda;
Background-Color: #0094FF;
preenchimento: 5px 10px 5px 10px;
}
.dvitem {
largura: 100%;
Altura: 400px;
Background-Color: #B6FF00;
claro: ambos;
}
.principal {
Largura: 960px;
Margem: 0px Auto 0px Auto;
}
</style>
</head>
<Body>
<div>
<ul>
<li> Home </li>
<li> Item1 </li>
<li> Item2 </li>
<li> Item3 </li>
<li> Item4 </li>
</ul>
<div>
</div>
</div>
</body>
</html>
Essa página é reduzida no efeito de aderência, como mostrado na figura:
Como modificá -lo? Em páginas tradicionais como essa, precisamos apenas escrever um CSS com base nas características do relé do Windows 8. Que nossa página seja apresentada e exibida com uma largura de 320 pixels.
O código de implementação é o seguinte: Adicione o seguinte código de estilo à página original
@media tela e (max-width: 320px) {
@-ms-viewport {width: 320px; }
.nav {
preenchimento: 5px 0px 5px 0px;
margem: 0px;
largura: 100%; Background-Color: #FFF;
}
.nav li {
Largura: 300px;
claro: ambos;
margem: 0px 0px 1px 0px;
Background-Color: #0094FF;
preenchimento: 5px 0px 5px 0px;
}
.dvitem {
largura: 95%;
Altura: 600px;
Background-Color: #FF00A4;
claro: ambos;
}
.principal {
Largura: 320px;
Margem: 0px Auto 0px Auto;
}
}
Não há diferença entre a navegação em tela cheia e a navegação tradicional.
A diferença é que o efeito da exibição é óbvio quando você o coloca em uma tela pequena, como mostrado na figura a seguir.
Este amostra Download/Arquivos/Risco/Index.rar