이러한 페이지는 붙여넣으면 아래와 같이 축소됩니다.
어떻게 수정하나요? 이와 같은 기존 페이지에서는 Windows 8의 스내핑 기능을 기반으로 CSS만 작성하면 페이지를 320픽셀 너비로 배치하고 표시할 수 있습니다.
구현 코드는 다음과 같습니다. 원본 페이지에 다음 스타일 코드 추가
코드 복사
@media screen 및 (max-width: 320px) {
@-ms-viewport { width: 320px }
. nav { 패딩: 5px 0px 5px 0px; 여백: 0px; 너비: 100% background-color:#fff;
.nav li { 지우기: 둘 다;
여백: 0px 0px 1px 0px;
배경색: #0094ff;
}
🎜> .dvItem {
> 너비: 95%;
높이: 600px;
배경색: #ff00a4;
지우기: 둘 다
{
width: 320px;
margin: 0px auto 0px auto;
}
}
전체 화면 탐색과 기존 탐색 사이에는 차이가 없습니다.
차이점은 작은 화면에 붙였을 때 아래와 같이 디스플레이 효과가 매우 확연하다는 점입니다.
샘플 코드 다운로드
/Files/risk/Index.rar
여백: 0px 0px 1px 0px;
배경색: #0094ff;
}
🎜> .dvItem {
> 너비: 95%;
높이: 600px;
배경색: #ff00a4;
지우기: 둘 다
{
width: 320px;
margin: 0px auto 0px auto;
}
}
전체 화면 탐색과 기존 탐색 사이에는 차이가 없습니다.
차이점은 작은 화면에 붙였을 때 아래와 같이 디스플레이 효과가 매우 확연하다는 점입니다.
샘플 코드 다운로드
/Files/risk/Index.rar