재단-미디어 쿼리

미디어 쿼리는 너비, 높이, 색상과 같은 미디어 기능을 포함하고 지정된 화면 해상도에 따라 콘텐츠를 표시하는 CSS3 모듈입니다.

재단은 다음 미디어 쿼리를 사용하여 분석 범위를 만듭니다.

Small − 모든 화면에 사용됩니다.
Medium − 640 픽셀 이상의 화면에 사용됩니다.
Large − 1024 픽셀 이상의 화면에 사용됩니다.

중단 점 클래스 를 사용하여 화면 크기를 변경할 수 있습니다 . 예를 들어, 당신이 사용할 수있는 .small-6 작은 크기의 화면과에 대한 클래스를 .medium-4 다음 코드에서와 같이 중간 크기의 스크린을위한 클래스 -

<div class = "row">
   <div class = "small-6 medium-4 columns"></div>
   <div class = "small-6 medium-8 columns"></div>
</div>

중단 점 변경

응용 프로그램에서 Foundation의 SASS 버전을 사용하는 경우 중단 점을 변경할 수 있습니다. 아래와 같이 설정 파일 의 $ breakpoints 변수 아래에 중단 점 이름을 배치 할 수 있습니다.

$breakpoints: (
   small: 0px,
   medium: 640px,
   large: 1024px,
   xlarge: 1200px,
   xxlarge: 1440px,
);

$ breakpoint-classes 변수를 수정하여 설정 파일에서 중단 점 클래스를 변경할 수 있습니다 . CSS에서 .large 클래스 를 사용하려면 아래와 같이 목록 끝에 추가하십시오.

$breakpoints-classes: (small medium large);

CSS에서 .xlarge 클래스 를 사용 하고 다음과 같이 목록 끝에이 클래스를 추가 한다고 가정 합니다.

$breakpoints-classes: (small medium large xlarge);

SASS

중단 점 믹스 인

@include 와 함께 breakpoint () mixin을 사용하여 미디어 쿼리를 작성할 수 있습니다 .
사용 다운 또는 단지 다음과 같은 코드 형식과 같이 키워드 중단 점의 값과 함께 미디어 쿼리의 동작을 변경 -

.class_name {
   // code for medium screens and smaller
   @include breakpoint(medium down) { }
   
   // code for medium screens only
   @include breakpoint(medium only) { }
}

기기 방향 또는 픽셀 밀도에 세로 , 가로 및 망막의 세 가지 미디어 쿼리를 사용할 수 있으며 너비 기반 미디어 쿼리가 아닙니다.

중단 점 기능

내부 함수를 사용하여 breakpoint () mixin 의 기능을 사용할 수 있습니다 .
중단 점 () 기능은 자신의 미디어 쿼리를 작성하는 직접 사용할 수 있습니다 -

@media screen and #{breakpoint(medium)} {
   // code for medium screens and up styles
}

자바 스크립트

미디어 쿼리 작업

Foundation JavaScript는 아래에 지정된대로 Foundation.MediaQuery 객체 의 현재 중단 점 이름에 액세스하기 위해 MediaQuery.current 함수를 제공합니다.

Foundation.MediaQuery.current

MediaQuery.current의 기능 표시 작은 , 중간 , 큰 전류 브레이크 포인트 이름 등.
아래와 같이 MediaQuery.get 함수를 사용하여 중단 점의 미디어 쿼리를 얻을 수 있습니다.

Foundation.MediaQuery.get('small')

Sass 참조

변수

다음 표는 구성 요소의 기본 스타일을 사용자 정의하는 데 사용할 수있는 SASS 변수를 나열합니다.

Sr. 아니.	이름 및 설명	유형	기본값
1	$breakpoints breakpoint () mixin 을 사용하여 미디어 쿼리를 작성하는 데 사용할 수있는 중단 점 이름입니다 .	지도	작게 : 0px 중간 : 640px 크게 : 1024px xlarge : 1200px xxlarge : 1440px
2	$breakpoint-classes $ breakpoint-classes 변수를 수정하여 CSS 클래스 출력을 변경할 수 있습니다 .	명부	작은 중간 큰