응답 식 개발
미디어 조 회 를 사용 하여 서로 다른 너비 의 장 치 를 배치 하고 스타일 의 설정 을 하여 서로 다른 장 치 를 배치 합 니 다.
응답 식 레이아웃 용기
응답 식 은 하위 요 소 를 조합 하여 변화 효 과 를 실현 하기 위해 부모 급 을 레이아웃 용기(일반 클래스 는 container)로 해 야 합 니 다.
원리:서로 다른 화면 에서 미디어 조 회 를 통 해 이 레이아웃 용기 의 크기 를 바 꾸 고 내부 요소 의 배열 방식 과 크기 를 바 꾸 어 서로 다른 화면 에서 서로 다른 페이지 레이아웃 과 스타일 변 화 를 보 는 효 과 를 실현 합 니 다.
장치 구분
장치 구분
치수 구간
자주 사용 하 는 사이즈 구분(너비 설정)
초소형 스크린(핸드폰)
< 768px
100%
작은 스크린 장치(평판)
768px ~ 992px
750px
중간 화면(데스크 톱 디 스 플레이)
992px ~ 1200px
970px
와 이 드 스크린 장치(큰 데스크 톱 디 스 플레이)
>= 1200px
1170px
코드 예
이것 은 가장 자주 사용 하 는 구분 이 고 구체 적 인 상황 에 따라 조정 할 수 있다.
/* （ ） */
@media screen and (max-width: 767px) {
.container {
width: 100%;
}
}
/* （ ） */
@media screen and (min-width: 768px) {
.container {
width: 750px;
}
}
/* （ ） */
@media screen and (min-width: 992px) {
.container {
width: 970px;
}
}
/* （ ） */
@media screen and (min-width: 1200px) {
.container {
width: 1170px;
}
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Grunt】 복수의 CSS, JavaScript 파일을 minfy한다여러 CSS, JavaScript 파일을 Grunt를 사용하여 단번에 각각 하나의 파일로 minfy합니다. ① Gruntfile 작성 ② package.json 쓰기 ④ html CSS, JavaScript 지정 부...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
