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

CSS3 미디어 쿼리 사용 요약

WBOY

풀어 주다： 2016-10-19 10:19:24

원래의

873명이 탐색했습니다.

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

준비 1: 메타태그 설정

<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"</span><span style="color: #0000ff;">></span>

로그인 후 복사

이 코드의 여러 매개변수에 대한 설명:

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

준비 2: JS 호환 파일 로드

IE8은 HTML5나 CSS3 미디어를 지원하지 않기 때문에 코드 호환성을 보장하기 위해 두 개의 JS 파일을 로드해야 합니다.

<span style="color: #008000;"><!--</span><span style="color: #008000;">[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]</span><span style="color: #008000;">--></span>

로그인 후 복사

준비 3: 기본 IE 렌더링 모드를 가장 높게 설정하세요(이 부분의 추가 여부를 선택하실 수 있습니다)

요즘에는 많은 사람들의 IE 브라우저가 IE9 이상으로 업그레이드 되었기 때문에 이때 이상한 일이 많이 발생합니다. 예를 들어 지금의 브라우저는 IE9인데 브라우저의 문서 모드는 IE8입니다.

이런 상황을 방지하려면 IE의 문서 모드를 항상 최신 상태로 유지하는 다음 코드가 필요합니다.

<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="IE=edge"</span><span style="color: #0000ff;">></span>

로그인 후 복사

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

<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="IE=Edge，chrome=1"</span><span style="color: #0000ff;">></span>

로그인 후 복사

일부 사용자가 자신의 컴퓨터에 이 코드를 설치한 경우 이 코드 뒤에 chrome=1이 Google Chrome 프레임(Google Embedded Browser Framework GCF) 이 추가된 이유는 무엇입니까? 플러그인을 사용하면 컴퓨터의 IE에서 Webkit 엔진과 V8 엔진을 사용하여 버전에 관계없이 조판 및 계산을 수행할 수 있습니다. 이 플러그인을 설치하지 않으면 이 코드는 IE가 가장 높은 문서 모드에서 효과를 표시하도록 합니다. 나는 여전히 이 코드를 사용하는 것을 권장하지만 이 코드 없이도 사용할 수 있습니다.

CSS3 미디어 작성 방법 입력:

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

<span style="color: #800000;">@media screen and (max-width: 960px)</span>{<span style="color: #ff0000;">
    body{
        background</span>:<span style="color: #0000ff;"> #ccc</span>;
    }<span style="color: #800000;">
}</span>

로그인 후 복사

이것은 미디어를 작성하는 표준 방법으로 간주되어야 합니다. 위 CSS 코드는 페이지가 960px 미만인 경우 아래 CSS를 실행해야 함을 의미합니다. 너무 큰 의심하지 마십시오.

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

<span style="color: #800000;">@media (max-width: 960px)</span>{<span style="color: #ff0000;">
    body{
        background</span>:<span style="color: #0000ff;"> #ccc</span>;
    }<span style="color: #800000;">
}</span>

로그인 후 복사

브라우저 크기 가 960px 보다 큰 경우 코드가 있습니다.

<span style="color: #800000;">@media screen and (min-width:960px)</span>{<span style="color: #ff0000;">
    body{
        background</span>:<span style="color: #0000ff;">orange</span>;
    }<span style="color: #800000;">
}</span>

로그인 후 복사

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

<span style="color: #800000;">@media screen and (min-width:960px) and (max-width:1200px)</span>{<span style="color: #ff0000;">
    body{
        background</span>:<span style="color: #0000ff;">yellow</span>;
    }<span style="color: #800000;">
}</span>

로그인 후 복사

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