CSS 웹 페이지 레이아웃 입문 튜토리얼 2: 1열 적응형 너비_기본 튜토리얼

적응형 레이아웃은 웹 디자인의 일반적인 레이아웃 형식으로, 브라우저 창의 크기에 따라 너비와 높이 값을 자동으로 변경할 수 있습니다. 좋은 적응형 레이아웃 웹사이트는 다양한 해상도에 대응할 수 있습니다. .고효율 모니터는 최고의 디스플레이 효과를 제공할 수 있습니다. 실제로 div의 기본 상태는 공간의 전체 행을 차지합니다. 이는 너비가 100%인 적응형 레이아웃의 표현입니다. 적응형 레이아웃의 열에 대해 수행해야 하는 작업도 매우 간단합니다. 너비를 고정 값에서 백분율 값으로 변경합니다.

코드 복사 코드는 다음과 같습니다.

#layout {
테두리: 2px solid #A9C9E2 ;
background-color: #E8F5FE;
height: 200px;
width: 80%;
}

CSS는 숫자 값을 매개변수로 사용합니다. 대부분의 스타일 속성은 모두 백분율을 제공하며 너비 속성도 예외는 아닙니다. 여기서는 너비가 고정된 300px의 열에서 80%로 변경되었습니다. 아래 미리보기에서 볼 수 있듯이 div의 너비가 80으로 변경되었습니다. 브라우저 너비의 % 값입니다. 적응형의 장점은 브라우저 창의 크기가 확장되거나 축소될 때 해당 너비가 브라우저의 현재 너비에 비례하여 유지된다는 것입니다.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>AA25.CN_1</title>