댓글 :이 기사의 편집자는 HTML5를 사용하여 Windows 8에서 웹 사이트를 지원하는 방법을 소개합니다. 필요한 경우 참조하십시오.
먼저 Windows 8의 지원에 대해 알아 보겠습니다. Windows 8의 메트로 응용 프로그램은 화면을 잘 분할 할 수 있습니다. 다음 그림
이를 통해 사용 중에 사용자는 매우 쉽게 전환 할 수 있습니다. 이 시스템에는 첨부에 대한 엄격한 규정이 있습니다. 최대 두 개의 화면에서 하나는 크고 다른 하나는 작습니다. 작은 화면의 너비는 320 픽셀로 고정됩니다.
따라서 사용자가 웹 사이트를 작은 화면에 게시하면 기본적으로 페이지가 비례 적으로 줄어 듭니다. 아래 그림과 같이 :
그렇다면 어떻게 그런 문제를 매우 잘 해결할 수 있습니까? 웹 사이트가 Windows 8의 작은 화면에서 매우 친절한 효과를 보여주는 것은 어떻습니까? 아래에는 간단한 예가 있습니다
그림에서 볼 수 있듯이 수평으로 정렬 된 탐색, 내용 등을 포함하여 매우 간단하고 전통적인 페이지.
전통적인 코드에서도 마찬가지입니다
<! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<제목> </title>
<스타일>
.nav {
패딩 : 5px 0px 5px 0px;
여백 : 0px;
너비 : 100%;
목록 스타일 유형 : 없음;
배경색 : #cddcd6;
높이 : 28px;
}
.nav li {
여백 : 0px 1px 0px 0px;
플로트 : 왼쪽;
배경색 : #0094ff;
패딩 : 5px 10px 5px 10px;
}
.dvitem {
너비 : 100%;
높이 : 400px;
배경색 : #b6ff00;
Clear : 둘 다;
}
.기본 {
너비 : 960px;
여백 : 0px Auto 0px Auto;
}
</스타일>
</head>
<body>
<div>
<ul>
<li> 홈 </li>
<li> item1 </li>
<li> item2 </li>
<li> item3 </li>
<li> item4 </li>
</ul>
<div>
</div>
</div>
</body>
</html>
이러한 페이지는 그림과 같이 고정 효과에서 줄어 듭니다.
수정하는 방법? 이와 같은 기존 페이지에서는 Windows 8의 릴레이 특성에 따라 CSS 만 작성하면됩니다. 320 픽셀의 폭으로 페이지를 배치하고 표시하십시오.
구현 코드는 다음과 같습니다. 원래 페이지에 다음 스타일 코드를 추가하십시오.
@Media 화면 및 (max-width : 320px) {
@-ms-viewport {너비 : 320px; }
.nav {
패딩 : 5px 0px 5px 0px;
여백 : 0px;
너비 : 100%; 배경색 : #fff;
}
.nav li {
너비 : 300px;
Clear : 둘 다;
여백 : 0px 0px 1px 0px;
배경색 : #0094ff;
패딩 : 5px 0px 5px 0px;
}
.dvitem {
너비 : 95%;
높이 : 600px;
배경색 : #ff00a4;
Clear : 둘 다;
}
.기본 {
너비 : 320px;
여백 : 0px Auto 0px Auto;
}
}
전체 화면 브라우징과 전통적인 브라우징에는 차이가 없습니다.
차이점은 디스플레이 효과가 다음 그림과 같이 작은 화면에 붙일 때 명백하다는 것입니다.
이 샘플 코드 다운로드/파일/ritch/index.rar