CSS3 반응형 레이아웃 디자인 활용 검토

반응형 디자인이란 다양한 기기의 해상도에 따라 디스플레이 스타일이 달라지는 것을 의미합니다.
　media 속성 은 다양한 미디어 유형에 대해 다양한 스타일을 지정하는 데 사용됩니다. 브라우저의 너비와 높이에 관계없이 페이지를 다시 렌더링합니다.
구문: @media mediatype 및 | not | only(미디어 기능) {}
예:
max-width : 600px)" href="small.css"/>
　 결과: 해상도를 600으로 높이면 이 스타일 시트의 스타일이 표시됩니다.

미디어 유형:

모든 장치용 모두

프린터 및 인쇄 장치용 인쇄

컴퓨터 화면, 태블릿, 스마트폰.

　　　@media screen 및 (max-width : 600px) {

　　　　 /*폭이 600px 미만인 컴퓨터 화면 일치*/

　　　}

　not 키워드는 다음과 같이 사용됩니다. 특정 기관 미디어 유형을 제외합니다. 　　　@media not print {　　　　/*프린터를 제외한 모든 장치 일치*/

　　　}

　　only는 특정 미디어 유형을 지정하는 데 사용됩니다.
　　　@media only screen and (
min-width

:

300
) and (max-width:500){
　　　 /*이 단락은 컬러 스크린 장치에만 해당됩니다* /
　　}

미디어 속성: (일반적으로 사용됨)　　　 max-width(max-height): 최대 너비 및 최대 높이

@media (최대 너비: 600px) {

　　　 인터페이스 너비가 600px 미만인 장치 일치

　　　}

　min-width(

min-height): 최소 너비 및 높이 @media (최소 너비: 400px) {

　　　 인터페이스 너비가 400px보다 큰 장치 일치

　　　}
　 Max-device-width(max-device-height) 장치의 최대 너비 및 높이
@media (max-device-width: 800px) {
　　　　 너비가 800px 미만인 장치(인터페이스 아님) 일치 　　　}　　min-device-width(min-device-height): 최대 너비 장치 및 높이
　　　@media (min-device-width: 600px) {
　　　 너비가 600px보다 큰 장치(인터페이스 제외) 일치
　　　}
　　방향: 세로 세로 화면
href="indexa.css"/>
결과: 이 스타일을 세로 화면에 표시
방향 :landscape 가로 화면
수식

위 내용은 CSS3 반응형 레이아웃 디자인 활용 검토의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!