CSS3 미디어 쿼리 사용 요약-CSS 튜토리얼-php.cn

CSS3 미디어 쿼리 사용 요약

高洛峰

풀어 주다： 2017-03-17 12:54:34

원래의

1653명이 탐색했습니다.

우선 미디어를 사용할 때 모바일 기기의 디스플레이 효과와 호환되도록 다음 코드를 설정해야 합니다.

준비 1: 메타 태그 설정

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

로그인 후 복사

이것은 코드 여러 매개변수 설명:

width = device-width: 너비는 현재 장치의 너비와 같습니다.
initial-scale: 초기 배율 비율(기본 설정은 1.0)
minimum-scale: 사용자가 확대/축소할 수 있는 최소 비율(기본 설정은 1.0)
maximum-scale: 사용자가 확대/축소할 수 있는 최대 비율(기본값은 1.0)
user-scalable: 사용자가 수동으로 확대/축소할 수 있는지 여부(기본값은 1.0) 아니요, 사용자가 페이지를 확대하거나 축소하는 것을 원하지 않기 때문입니다)

준비 2: 호환 파일 로드 JS

왜냐하면 IE8은 HTML5 또는 CSS3 미디어를 지원하지 않으므로 코드가 호환성을 달성하도록 두 개의 JS 파일을 로드해야 합니다.

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

로그인 후 복사

준비 3: IE 렌더링 모드를 가장 높은 기본값( 이 부분은 추가할지 말지 선택하시면 됩니다)

요즘 많은 분들의 IE 브라우저가 IE9 이상으로 업그레이드 되니까 이때 이상한 일들이 많이 발생합니다. 지금은 IE9 브라우저지만 브라우저의 문서 모드는 IE8입니다.

이러한 상황을 방지하려면 IE의 문서 모드를 항상 최신 상태로 만들기 위해 다음 코드가 필요합니다.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

로그인 후 복사

더 나은 작성 방법이 있습니다:

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

로그인 후 복사

왜 이 코드 뒤에 chrome=1이 추가되어 있습니까? 일부 사용자가 이것을 가지고 있는 경우 이 Google Chrome 프레임(Google 내장 브라우저프레임워크GCF)입니다. 컴퓨터에 설치된 크롬 플러그인은 버전에 관계없이 컴퓨터의 IE가 조판 및 계산을 위해 Webkit 엔진과 V8 엔진을 사용할 수 있게 해 주지만 사용자가 이 플러그를 설치하지 않는 경우에는 매우 강력합니다. -in을 선택하면 이 코드는 IE가 가장 높은 문서 모드를 사용하도록 합니다. 나는 여전히 이 코드를 사용하는 것을 권장하지만 이 코드 없이도 사용할 수 있습니다.

CSS3 미디어 작성 방법 입력:

먼저 다음 코드를 살펴보겠습니다. 반응형 웹사이트 CSS에서 다음과 유사한 코드를 자주 보는 것으로 추정됩니다.

@media screen and (max-width: 960px){
    body{
        background: #ccc;
    }}

로그인 후 복사

이것은 미디어 작성의 표준 방식으로 간주되어야 합니다. 위 CSS 코드는 페이지가 960px보다 작을 때 그 아래에 있는 CSS를 실행한다는 의미입니다.

위 코드에서 화면이 있다는 것을 알 수 있을 것입니다. 이는 장치에 페이지를 인쇄할 때 세리프 글꼴을 사용하고 화면에 표시할 때 산세리프 글꼴을 사용하도록 지시하는 것입니다. 하지만 이제는 많은 웹사이트에서 사용자가 인쇄할 때 고려할 필요가 없기 때문에 화면을 직접 생략하는 것으로 나타났습니다.

@media (max-width: 960px){
    body{
        background: #ccc;
    }}

로그인 후 복사

다음과 같이 직접 작성할 수 있습니다. 브라우저 크기가 다음보다 클 때 코드가 있습니다. 960px:

@media screen and (min-width:960px){
    body{
        background:orange;
    }}

로그인 후 복사

위 사용법을 혼합할 수도 있습니다.

@media screen and (min-width:960px) and (max-width:1200px){
    body{
        background:yellow;
    }}

로그인 후 복사

위 코드는 페이지 너비가 960px보다 크고 1200px보다 작을 때 다음 CSS를 실행한다는 의미입니다.

미디어의 모든 매개변수 요약

위는 우리가 가장 자주 사용하는 미디어 쿼리의 3가지 특징, 초과, 같음의 작성 방법입니다. ~ 이하. 미디어 쿼리기의 전체 기능은 확실히 이 세 가지 기능 이상입니다. 다음은 제가 요약한 매개변수 사용에 대한 몇 가지 설명입니다.

width: 브라우저에 표시되는 너비입니다.
높이: 브라우저에 표시되는 높이입니다.
device-width: 장치 화면의 너비입니다.
device-height: 장치 화면의 높이입니다.
방향: 기기가 현재 가로 또는 세로상태인지 확인하세요.
aspect-ratio: 브라우저에 표시되는 너비와 높이의 비율을 감지합니다. (예: 가로세로비:16/9)
device-aspect-ratio: 장치의 너비와 높이의 비율을 감지합니다.
color: 색상을 감지하는 자릿수입니다. (예: min-color:32는 장치에 32비트 색상이 있는지 감지합니다.)
color-index: 장치 색상 인덱스 테이블에서 색상을 확인하세요. 음수.
단색: 단색 프레임 버퍼 영역에서 픽셀당 비트 수를 감지합니다. (너무 고급이라 거의 사용하지 않을 것 같습니다.)
해상도: 화면이나 프린터의 해상도를 감지합니다. (예: 최소 해상도:300dpi 또는 최소 해상도:118dpcm)
그리드: 출력 장치가 그리드인지, 비트맵 장치인지 확인합니다.

위 내용은 CSS3 미디어 쿼리 사용 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!