집 > 기사 > 웹 프론트엔드 > CSS 반응형 레이아웃에 대한 미디어 쿼리

CSS 반응형 레이아웃에 대한 미디어 쿼리

Guanhui앞으로: 2020-05-14 10:23:382555검색

실제 프로젝트에서는 반응형 레이아웃 문제에 항상 직면하게 됩니다. 일부 반응형 UI 프레임워크를 사용하지 않은 경우 일반적으로 미디어 쿼리를 사용하여 반응형 레이아웃을 구현하게 됩니다. 조금 요약할 필요가 있다고 생각합니다.

가장 먼저 이해해야 할 것은 미디어 쿼리를 사용하면 브라우저 크기가 재설정되면 페이지가 브라우저의 너비와 높이에 따라 다시 렌더링된다는 것입니다.

1. 메타에 대하여

미디어 쿼리를 사용하기 전에 모바일 디바이스의 표시 효과와 호환되도록 e8e496c15ba93d81f6ea4fe5f55a2244 설정을 사용해야 하므로 먼저 HTML의 16a8c94110984f918953ac7222a65798 .

e8e496c15ba93d81f6ea4fe5f55a2244 이 태그는 일반적으로 head 태그 내부에 위치하며 설명, 검색 엔진의 키워드, 새로 고침 빈도 등 HTML 요소에 대한 메타 정보(메타 정보)를 제공하는 데 사용됩니다.

미디어 쿼리에 대해 다음과 같이 설정합니다.

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

매개변수 설명:

1 이름 속성은 이름/값 쌍에 이름을 제공합니다. name="viewport"는 뷰포트 외에 창 설정을 의미합니다.

2. 콘텐츠 속성은 이름/값 쌍의 값을 제공하며, 콘텐츠는 항상 http-equiv 또는 이름 속성과 함께 사용되어야 합니다. 관련 정보를 통해 가치를 정의합니다. 콘텐츠 값 설명:

width = device-width: 너비는 현재 장치의 너비와 같습니다.

initial-scale: 초기 크기 조정 비율(기본 설정은 1.0)

minimum-scale: 최소 비율 사용자가 확대할 수 있는 크기(기본값은 1.0)

maximum-scale: 사용자가 확대할 수 있는 최대 크기(기본값은 1.0)

user-scalable: 사용자가 수동으로 확대/축소할 수 있는지 여부(기본값) 아니요, 사용자가 페이지를 확대하여 축소하는 것을 원하지 않기 때문입니다).

e8e496c15ba93d81f6ea4fe5f55a2244에 대한 보다 자세한 내용은 다음을 참조하세요. http://www.w3school.com.cn/tags/tag_meta.asp

2 미디어 쿼리 구현 방법

1 링크에서 장치의 크기를 직접 결정한 다음 다양한 외부 CSS 파일을 참조합니다. 예:

<link type="text/css" href="media_1.css" media="screen and (min-width: px)">

화면이 400px보다 큰 경우 외부 CSS 스타일 파일 media_1.css가 참조됩니다.

2. CSS 스타일을 설정할 때 바로 뒤에 @media를 설정하세요. 예:

.div1{
    width: 400px;
    height: 400px;
}
/*当屏幕大于1440px的彩色屏幕样式*/
@media screen and (min-width: 1440px){
    .div1{
        width: 800px;
        height:800px;
    }
}

이것은 CSS3를 사용하여 구현된 미디어 쿼리입니다. 실제로 미디어 쿼리는 본질적으로 스타일 오버레이입니다.

3. CSS3 미디어 쿼리

1. 기본 구문

@media  媒体类型  关键字 and (媒体功能) {
        /* CSS 样式 */
    }

2. 키워드

만: 미디어 쿼리를 지원하지 않는 브라우저를 제외하는 데 사용할 수 있는 특정 미디어 유형을 지정합니다.

not: 지정된 미디어 유형을 제외합니다.

미디어 기능을 지원하지 않지만 미디어 유형을 지원하는 장치에 키워드 사용이 자주 사용됩니다.

3. 미디어 유형

미디어 유형은 not 또는 only 키워드를 사용하지 않는 한 장치의 일반적인 범주를 설명합니다. media 유형은 선택 사항이며 all 유형이 암시적으로 사용됩니다.

값	설명
all	모든 멀티미디어 유형 장치용
print	프린터용
screen	용 컴퓨터 화면, 태블릿, 스마트폰 휴대폰 등
speech	스크린 리더의 경우

모든 브라우저는 "screen", "print" 및 "all" 값을 갖는 미디어 속성을 지원합니다.

4. 일반적으로 사용되는 미디어 기능

다음은 약간 더 일반적으로 사용될 수 있는 미디어 기능 중 일부입니다.

높이는 출력 장치에서 페이지의 표시 영역 높이를 정의합니다.

width는 출력 장치에서 페이지의 표시 영역 너비를 정의합니다.

max-height는 출력 장치에서 페이지의 최대 가시 영역 높이를 정의합니다.

max-width는 출력 장치에서 페이지의 최대 가시 영역 너비를 정의합니다.

min-height는 출력 장치에서 페이지의 최소 가시 영역 높이를 정의합니다.

min-width는 출력 장치에서 페이지의 최소 가시 영역 너비를 정의합니다.

device-height는 출력 장치 화면의 가시 높이를 정의합니다.

device-width는 출력 장치 화면의 표시 너비를 정의합니다.

max-device-height는 출력 장치의 화면에 표시되는 최대 높이를 정의합니다.

max-device-width는 출력 장치 화면의 최대 표시 너비를 정의합니다.

방향은 기기가 현재 가로 방향인지 세로 방향인지 감지합니다.

4. 실제 공통 크기 설정의 경우

다음에는 몇 가지 일반적인 화면 크기만 나열되어 있지만 초과, 미만, 같음 설정도 구현됩니다.

    /* 屏幕尺寸大于960px时（普通彩色屏幕） */
    @media only screen and (min-width:960px){ }
    /* 屏幕尺寸小于1440px时 */
    @media only screen and (max-width:1440px){ }
    /* 屏幕尺寸大于960px而小于1920px */
    @media only screen  (min-width: 960px) and (max-width: 1920px){ }
    /* 屏幕大于2000px时（MAC) */
    @media only screen and (min-width:2000px){ }
    /*  当设备可视宽度小于480px (iphone)*/
    @media only screen and (max-device-width:480px){ }
    /* 当设备可视宽度等于768px时 (iPad) */
    @media only screen and (device-width:768px){ }
    /* 屏幕尺寸大于481px而小于1024px (iPad 竖屏) */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { }
    /* 屏幕尺寸大于481px而小于1024px (iPad横屏) */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { }

참고: CSS의 스타일 적용 문제로 인해 실제 설정 중에 동일한 요소를 여러 다른 크기로 설정해야 하는 경우 최소 너비, 작은 것이 배치되어야 합니다. 위쪽에 있는 큰 것이 아래쪽에 있습니다. 마찬가지로, max-width를 사용하면 큰 것이 위쪽에 있고 작은 것이 아래쪽에 있습니다.

CSS 반응형 레이아웃에 대한 미디어 쿼리

관련 기사