반응형 레이아웃을 위한 CSS3 미디어 쿼리에 대한 자세한 소개

CSS3를 사용하여 반응형 레이아웃을 구현합니다.

유연한 상자를 갖는 것만으로는 충분하지 않습니다.
CSS3는 미디어속성도 확장합니다. 모듈 기능
미디어 쿼리미디어 쿼리기능

미디어 쿼리 도입

모바일 단말기의 급속한 인기로
스마트폰을 사용하는 사용자가 점점 늘어나고 있으며,
모두 사용자의 요구를 고려합니다.
사용자가 다양한 기기에서 페이지를 탐색하는 데 좋은 경험을 할 수 있도록 해야 합니다.
이러한 방식으로 미디어 쿼리가 필요합니다.
이를 통해 다음을 수행할 수 있습니다. 기기마다, 조건이 다른 기기마다 스타일이 다릅니다
그러나 모바일 단말기에 매우 중요한 요구 사항이 있는 경우
모바일 단말기 전용 페이지를 개발하는 것이 좋습니다
미디어 쿼리 소개를 살펴보겠습니다.

미디어 쿼리가 파일을 선택적으로 로드합니다

먼저 링크 방법을 살펴보겠습니다
CSS2에서는 이렇게 됩니다
링크 태그와 미디어 속성을 사용하여 소개합니다. 다른 스타일 시트(조건이 충족되는 경우)

<link rel="stylesheet" media="screen and (max-width: 600px)" href="demo.css" />

두 가지 개념을 소개합니다
하나는 미디어 유형(미디어 유형)이고 여기 화면은
미디어 특성 (미디어 쿼리), 여기서 최대 너비: 600px

미디어 쿼리는 CSS3 미디어 유형의 향상된 버전입니다
사실 미디어 쿼리는 미디어 유형으로 간주될 수 있습니다(판결). 조건) + CSS (Qualified Style Rules)

이 코드의 번역은
미디어 매체가 화면 유형이고 창 너비가 600px 이하인 경우 데모.css 스타일 파일을 도입하세요.

선택적으로 스타일을 추가하는 미디어 쿼리

CSS3에서 하는 일은 @media 규칙을 사용하여 CSS 파일에 다양한 스타일을 추가하는 것입니다
링크에 비해 페이지 요청을 줄이고 더 나은 결과를 얻을 수 있습니다

@media screen and (max-width: 600px) {    .demo1 {        ......
    }
    .demo2 {
        ......
    }
}

다른 미디어 쿼리 소개

미디어 쿼리가 너무 많아서 많이 알 필요는 없습니다
일반적으로 사용되는 두 가지는 위의 두 가지입니다
@ import는 미디어 쿼리도 사용할 수 있습니다

@import url(demo.css) screen;

미디어 쿼리 사용

여러 미디어 속성을 지정하려면
및 키워드를 사용하세요
미디어 속성 부분의 지정은 다음과 같습니다. 대괄호 사용

media="screen and (min-width: 601px) and (max-width: 800px)"

스타일은 601px~800px 사이의 화면에 적용됩니다

---

미디어 쿼리에는 대체 미디어 기능이 없거나 지정되지 않지만 쉼표로 구분된 목록을 사용할 수 있습니다

media="screen and (min-width: 601px), print and (min-width: 6in)"

601px 이상의 화면이나 최소 6인치 너비의 용지를 사용하는 인쇄 장치에 적용되는 스타일

---

미디어 쿼리에서는 부정적인 조건을 지정할 수 있습니다
키워드를 앞에 쓰지 않고 사용해야 합니다 미디어 성명
단일 조건 이전에 별도로 선언할 수 없으며 전체 미디어 성명을 무효화하지는 않습니다.

rree

스타일은 600px~800px 사이가 아닌 화면에 적용됩니다

---

not 키워드 외에도 초기 브라우저에서 미디어 쿼리를 숨기는 데 사용되는 only
도 있습니다.
not과 마찬가지로 미디어 선언문 시작 부분에 선언해야 합니다.
예를 들어

media="not screen and (min-width: 600px) and (max-width: 800px)"

라는 문장은 미디어 특성을 이해하지 못하기 때문에 초기 브라우저에서는 media="screen"
로만 이해할 수 있으므로 모든 화면 장치에 스타일 규칙
을 적용하게 됩니다. 하지만 키워드

media="screen and (min-width: 601px) and (max-width: 800px)"

만 사용하면 초기 브라우저에서는 media="only"
로 인식하겠지만 미디어 유형만 있는 것이 아니므로 스타일이 적용되지 않습니다
미디어를 숨기는 기능을 구현했습니다. 이전 브라우저의 쿼리

미디어 유형 및 미디어 속성

미디어 유형

미디어 유형에 대한 키워드는 많지만 대부분이 버려졌습니다(누가 사용하는지)
일반적으로 사용되는 것은 모두, 화면, 인쇄

(더 이상 사용되지 않음) 페이징 시각 장애인용 점자 프린터 (구식) 프로젝션 장치: 슬라이드..

미디어 유형

설명

모두

모든 미디어 장치

화면

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

인쇄

프린터, 인쇄 미리보기

음성

발생 장치: 스크린 리더..

청각

(사용되지 않음) 음성 및 오디오

媒体类型	描述
all	所有媒体设备
screen	彩色屏幕： 电脑、平板、智能机..
print	打印机、打印预览
speech	发生设备：屏幕阅读器..
aural	（已废弃）语音和音频合成器
braille	（已废弃）用盲人用点字法触觉回馈设备
embossed	（已废弃）分页的盲人用点字法打印机
handheld	（已废弃）便携设备：小型电话..
projection	（已废弃）投影设备：幻灯片..
tty	（已废弃）使用固定密度字母栅格的媒体：电传打字机和终端..
tv	（已废弃）电视机类型设备：电视、网络电视..

신디사이저

점자

(구식) 시각 장애인을 위한 점자 촉각 피드백 장치

양각

휴대용

(구식 ) 휴대용 장치: 소형 전화기..

프로젝션

tty

(구식) 고정 밀도 문자 격자를 사용하는 미디어: 텔렉스 타자기와 터미널..

tv

(구식) TV 유형 장비: 텔레비전, 인터넷 TV..

미디어 기능

미디어 기능이 많지만, 그 중 대부분은 사용되지 않습니다

媒体类型	描述
aspect-ratio	输出设备中的页面可见区域宽度与高度的比率
color	输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
color-index	在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
device-aspect-ratio	输出设备的屏幕可见宽度与高度的比率
device-height	输出设备的屏幕可见高度
device-width	输出设备的屏幕可见宽度
grid	查询输出设备是否使用栅格或点阵
height	输出设备中的页面可见区域高度
max-aspect-ratio	输出设备的屏幕可见宽度与高度的最大比率
max-color	输出设备每一组彩色原件的最大个数
max-color-index	输出设备的彩色查询表中的最大条目数
max-device-aspect-ratio	输出设备的屏幕可见宽度与高度的最大比率
max-device-height	输出设备的屏幕可见的最大高度
max-device-width	输出设备的屏幕最大可见宽度
max-height	输出设备中的页面最大可见区域高度
max-monochrome	在一个单色框架缓冲区中每像素包含的最大单色原件个数
max-resolution	设备最大分辨率
max-width	输出设备中页面最大可见区域宽度
min-aspect-ratio	输出设备中页面可见区域宽度与高度的最小比率
min-color	输出设备每一组彩色原件的最小个数
min-color-index	输出设备的彩色查询表中的最小条目数
min-device-aspect-ratio	输出设备屏幕可见宽度与高度的最小比率
min-device-width	输出设备的屏幕最小可见宽度
min-device-height	输出设备的屏幕的最小可见高度
min-height	输出设备中的页面最小可见区域高度
min-monochrome	一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution	设备的最小分辨率
min-width	输出设备中的页面最小可见区域宽度
monochrome	在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
orientation	输出设备中的页面可见区域高度是否大于或等于宽度
resolution	设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan	电视类设备的扫描工序
width	输出设备中的页面可见区域宽度

기기 너비/높이와 너비/높이를 구분하세요.
device-width/height는 장치의 너비입니다(브라우저의 너비가 아님)
width/height는 브라우저 창의 크기입니다
documentElement.clientWidth/를 사용하세요. 뷰포트 값

인 클라이언트 높이

위 내용은 반응형 레이아웃을 위한 CSS3 미디어 쿼리에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!