CSS는 다양한 해상도를 결정하고 다양한 너비 레이아웃을 표시하여 적응형 너비를 달성합니다.-HTML 튜토리얼-php.cn

CSS는 다양한 해상도를 결정하고 다양한 너비 레이아웃을 표시하여 적응형 너비를 달성합니다.

WBOY

풀어 주다： 2016-08-30 09:21:06

원래의

1115명이 탐색했습니다.

1. CSS DIV 웹 페이지 레이아웃에서 해상도가 1024px(픽셀) 이하인 경우 DIV 레이아웃 객체는 너비를 1000px로 표시하고 해상도가 1024px보다 큰 경우 너비를 표시합니다. 1200px 및 기타 요구 사항. CSS를 사용하여 브라우저 표시 너비를 변경하면 웹 페이지 너비의 레이아웃이 동적으로 변경됩니다(웹 페이지 너비는 브라우저 표시 너비에 따라 자동으로 넓어지고 좁아집니다).
개발과 함께 점점 더 많은 컴퓨터 사용자가 더 높은 디스플레이 해상도를 갖고 있지만 일부 사용자는 여전히 1024px 해상도 디스플레이를 사용합니다(여러 브라우저 해상도 통계 플랫폼에서 얻은 데이터에 따르면 현재 1200 미만의 해상도를 사용하는 사용자는 거의 없습니다. 하지만 CSS 레이아웃을 디자인할 때 최소 1024px 해상도 사용자를 고려해야 합니다.) 웹 페이지 레이아웃 너비가 1200px로 고정된 경우 이 문제를 해결하기 위해 1024 해상도의 사용자가 브라우저 아래에 스크롤 막대가 나타납니다. 문제가 발생하면 CSS3 스타일을 사용하여 사용자 브라우저의 너비를 결정하고 다양한 레이아웃 너비를 호출할 수 있습니다.

CSS 단어 및 구문 사용

코드는 다음과 같습니다.

@media 화면 및 (판단 속성){ CSS 스타일 선택기 }

여기서 변경할 CSS 스타일 선택기가 중괄호 안에 포함되어 있습니다.

2. 다양한 너비 스타일을 다양한 해상도로 표시하는 예

1. DIVCSS 작은 케이스 설명
먼저 DIV 상자 CSS 이름을 ".abc"로 설정하고, 높이를 300px로 설정하고, CSS 테두리를 검정색으로 설정하고, margin:0 자동 레이아웃을 중앙에 설정합니다. 이 두 가지 스타일은 관찰하기 쉽도록 미리 설정되어 있습니다.
브라우저를 수동으로 드래그하여 너비를 표시한 다음, 브라우저 너비를 500px 이하로 조정하면 해당 상자 너비가 100px로 표시됩니다. 901px 이하로 조정되면 상자 너비가 표시됩니다. ".abc"는 200px를 표시하는 상자 너비에 해당합니다. 브라우저 너비가 1201px보다 크게 조정되면 상자 개체 너비가 1200px보다 작을 때 표시됩니다. , 표시 너비는 900px입니다.

2. CSS 코드

코드는 다음과 같습니다.

.abc{ 높이:300px; 테두리:1px 솔리드 #000; 여백:0 자동}
@ 미디어 화면 및 (최소 너비: 1201px) {
.abc {너비: 1200px}
}
/* CSS 참고: 브라우저 너비가 1201px 이상으로 설정되면 abc는 1200px 너비를 표시합니다*/

@media 화면 및 (최대 너비: 1200px) {
.abc { width: 900px }
}
/* abc는 브라우저 너비가 설정될 때 설정됩니다. 1200px보다 크지 않음 디스플레이 900px 너비*/

@media 화면 및 (최대 너비: 901px) {
.abc {폭: 200px;}
}
/* 브라우저 너비가 901픽셀을 초과하지 않도록 설정된 경우 abc는 200픽셀 너비를 표시합니다*/

@media 화면 및 (최대 너비: 500px) {
.abc {폭: 100px;}
}
/* 브라우저 너비가 500px을 넘지 않도록 설정하면 abc는 100px 너비를 표시합니다*/

CSS 코드가 순서대로 되어 있고 CSS가 큰 것부터 작은 것 순으로 입력되어 있다는 점에 유의해야 합니다(브라우저의 너비가 클수록 높이가 높아집니다). 이는 논리적 관계와 @media의 때문입니다. CSS 디버깅에 대한 판단으로 인해 판단이 무효화됩니다.

3. HTML 코드

코드는 다음과 같습니다.