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

高洛峰
풀어 주다: 2017-03-15 09:42:22
원래의
1295명이 탐색했습니다.

반응형 디자인이란 다양한 기기의 해상도에 따라 디스플레이 스타일이 달라지는 것을 의미합니다.
 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿