이 게시물에서는 미디어 쿼리를 구현하는 데 필요한 지침을 언급합니다.
모바일 장치용 미디어 쿼리를 구현하는 방법은 무엇입니까?
미디어 쿼리는 ''만 언급하면 모바일 기기에 적용할 수 있습니다. @미디어 ” 태그를 사용하고 작은 중괄호 안에 화면 크기를 지정합니다. 그런 다음 해당 미디어 쿼리에 대한 CSS를 중괄호 안에 추가할 수 있습니다. 화면 크기가 사용자가 지정한 크기를 충족할 때마다 명시된 미디어 쿼리가 적용됩니다.
모바일 장치에 대한 미디어 쿼리 구현을 배우기 위한 실제 예를 살펴보겠습니다.
예시: 미디어 쿼리를 적용하여 2열 레이아웃에서 1열 레이아웃으로 변경되는 레이아웃 생성
아래 예에서는 웹 페이지의 레이아웃이 열 레이아웃에서 단일 열 레이아웃으로 변경됩니다.
1단계: HTML 구조 만들기
- 먼저 HTML 파일을 만들고 외부 CSS 스타일시트 파일을 해당 파일에 연결합니다. <머리> 부분.
- 그런 다음 <헤더> 섹션을 클릭하고 꼬리표.
- 만들기 'container-class'라는 클래스 이름과 그 안에 두 개의가 더 있으며 '라는 클래스 이름이 있습니다. 열 '. < 몸 >
<헤더>
< h1 > 리눅스 힌트 < / h1 >
< / 헤더>
< div 수업 = '컨테이너급' >
< div 수업 = '열' >
< h2 > 섹션 1 < / h2 >
< 피 > Linux Hint는 최고의 e-러닝 플랫폼 중 하나입니다. < / 피 >
< / div >
< div 수업 = '열' >
< h2 > 섹션 2 < / h2 >
< 피 > Linux Hint는 최고의 e-러닝 플랫폼 중 하나입니다. < / 피 >
< / div >
< / div >
< / 몸 >2단계: CSS 적용
본문 섹션:- 먼저 “를 작성하여 본문 섹션을 지정합니다. 몸 ” 태그를 지정하고 중괄호를 언급합니다.
- 중괄호 안에 글꼴 모음, 배경색, 여백 및 패딩을 지정합니다.
에 <헤더> 부분:
- 텍스트 색상, 텍스트 정렬, 배경색 및 패딩을 지정합니다.
에 '컨테이너급' 사업부:
- 설정 ' 표시하다 ” 속성 값을 “ 로 몸을 풀다 '를 사용하여 Flexbox를 생성합니다.
- 사용 ' 정당화 내용 ”를 사용하여 콘텐츠 사이에 공간을 추가하고 패딩을 추가합니다.
열 클래스에서:
- 먼저, 명시된 값을 ' 몸을 풀다 ” 속성을 사용하여 두 레이아웃 섹션 사이에 공백을 추가합니다.
- 그런 다음 배경색, 테두리, 패딩 및 상자 크기를 추가합니다.
3단계: 미디어 쿼리 적용
- 모바일 기기에 미디어 쿼리를 적용하려면 먼저 ' @미디어 ” 태그.
- 그런 다음 ' 768px '는 모바일 기기에서 일반적으로 사용되는 ' 최대 너비 ” 속성을 작은 중괄호 안에 넣습니다.
- 그 후에는 “ 열 ” 값을 “ 플렉스 방향 ”에 적용될 속성 컨테이너 클래스' 클래스. 지정된 화면 크기가 감지될 때마다 두 개의 열이 하나의 열로 변경됩니다.
- 마지막으로 '에 CSS를 적용합니다. 열 ” 클래스를 지정하고 “ 여유 ' 그리고 ' 몸을 풀다 ” 값:
글꼴 모음: 산세리프;
배경- 색상 : 은;
여유: 0 ;
심: 0 ;
}
머리글 {
배경- 색상 : #2f4f4f;
패딩: 20px;
텍스트- 맞추다 : 중앙;
색상 : 하얀색;
}
.컨테이너- 수업 {
디스플레이: 플렉스;
신이 옳다고 하다- 콘텐츠 : 공백 사이;
패딩: 20px;
}
.열 {
몸을 풀다: 0 1 계산 ( 오십 % - 10px ) ;
국경 : 1px 단색 녹색;
배경- 색상 : 하얀색;
상자 크기 조정: 테두리 상자;
패딩: 20px;
}
@ 미디어 ( 최대 너비 : 768px ) {
.컨테이너- 수업 {
플렉스 방향: 열;
}
.열 {
몸을 풀다: 0 1 100 %;
여백 하단: 20px;
}
}산출
다음은 미디어 쿼리를 적용한 후 웹페이지의 출력입니다. 이 출력은 2열 반응형 레이아웃입니다.
모바일용 미디어 쿼리를 사용하여 화면이 지정된 크기를 충족할 때마다 1열 레이아웃으로 전환됩니다.
결론
모바일 장치에 대한 미디어 쿼리를 구현하려면 먼저 ' 뷰포트 '에서' 머리 ' 부분. 그런 다음 모바일 디자인 전용 CSS를 작성합니다. 그런 다음 “@media” 태그를 사용하고 모바일 화면 크기를 지정하여 미디어 쿼리를 추가합니다. 예를 들어 태블릿의 경우 768px, 휴대폰의 경우 480px를 지정합니다. 이 문서에서는 모바일 장치에 대한 미디어 쿼리를 구현하는 절차를 설명했습니다.