Bootstrap 3을 사용하여 화면 크기에 따라 몇 가지 글꼴 크기를 조정하려는 반응 형 레이아웃을 작성하고 있습니다. 미디어 쿼리를 사용하여 이러한 종류의 논리를 만들려면 어떻게해야합니까?
답변
부트 스트랩 3
일관성을 유지하려면 BS3에서 사용되는 선택기가 있습니다.
@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}참고 : 참고로, 디버깅에 유용 할 수 있습니다.
<span class="visible-xs">SIZE XS</span>
<span class="visible-sm">SIZE SM</span>
<span class="visible-md">SIZE MD</span>
<span class="visible-lg">SIZE LG</span>부트 스트랩 4
BS4에서 사용되는 선택기는 다음과 같습니다. “초소형”이 기본값이므로 BS4에는 “최저”설정이 없습니다. 즉, 먼저 XS 크기를 코딩 한 다음 나중에이 미디어를 덮어 씁니다.
@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}2019-02-11 업데이트 : BS3 정보는 여전히 버전 3.4.0에서 정확하고 새 그리드에 대해 BS4가 업데이트되었으며 4.3.0에서 정확합니다.
답변
bisio의 답변과 Bootstrap 3 코드를 기반으로 전체 미디어 쿼리 세트를 복사하여 스타일 시트에 붙여 넣으려는 사람에게 더 정확한 답변을 얻을 수있었습니다.
/* Large desktops and laptops */
@media (min-width: 1200px) {
}
/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
}
/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
}
/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
}
/* Portrait phones and smaller */
@media (max-width: 480px) {
}답변
LESS 또는 SCSS / SASS를 사용 중이고 LESS / SCSS 버전의 부트 스트랩을 사용중인 경우 변수에 액세스 할 수 있으면 변수 도 사용할 수 있습니다. @ full-decent의 답변에 대한 LESS 번역은 다음과 같습니다.
@media(max-width: @screen-xs-max){}
@media(min-width: @screen-sm-min){} /* deprecated: @screen-tablet, or @screen-sm */
@media(min-width: @screen-md-min){} /* deprecated: @screen-desktop, or @screen-md */
@media(min-width: @screen-lg-min){} /* deprecated: @screen-lg-desktop, or @screen-lg */@screen-sm-max및 @screen-md-max에 대한 변수도 있습니다.이 변수는 일반적으로와 함께 사용하기 위해 @screen-md-min및 보다 1 픽셀 작습니다 .@screen-lg-min@media(max-width)
편집 : SCSS / SASS를 사용하는 경우 변수 는 $대신으로 시작 @하므로 $screen-xs-max기타 등등입니다.
답변
다음은 Bootstrap3의 값입니다.
/* Extra Small */
@media(max-width:767px){}
/* Small */
@media(min-width:768px) and (max-width:991px){}
/* Medium */
@media(min-width:992px) and (max-width:1199px){}
/* Large */
@media(min-width:1200px){}답변
다음은 두 가지 예입니다.
뷰포트의 너비가 700px 이하가되면 모든 h1 태그를 20px로 만듭니다.
@media screen and ( max-width: 700px ) {
h1 {
font-size: 20px;
}
}뷰포트가 700px 이상에 도달 할 때까지 h1을 모두 20px로 만듭니다.
@media screen and ( min-width: 700px ) {
h1 {
font-size: 20px;
}
}희망이 있습니다 : 0)
답변
다음은 적은 파일을 가져 오지 않고 LESS를 사용하여 부트 스트랩을 모방 한보다 모듈화 된 예입니다.
@screen-xs-max: 767px;
@screen-sm-min: 768px;
@screen-sm-max: 991px;
@screen-md-min: 992px;
@screen-md-max: 1199px;
@screen-lg-min: 1200px;
//xs only
@media(max-width: @screen-xs-max) {
}
//small and up
@media(min-width: @screen-sm-min) {
}
//sm only
@media(min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
}
//md and up
@media(min-width: @screen-md-min) {
}
//md only
@media(min-width: @screen-md-min) and (max-width: @screen-md-max) {
}
//lg and up
@media(min-width: @screen-lg-min) {
}답변
다른 사용자의 답변을 바탕으로 더 쉬운 사용법을 위해 다음과 같은 사용자 정의 믹스를 작성했습니다.
적은 입력
.when-xs(@rules) { @media (max-width: @screen-xs-max) { @rules(); } }
.when-sm(@rules) { @media (min-width: @screen-sm-min) { @rules(); } }
.when-md(@rules) { @media (min-width: @screen-md-min) { @rules(); } }
.when-lg(@rules) { @media (min-width: @screen-lg-min) { @rules(); } }사용법 예
body {
.when-lg({
background-color: red;
});
}SCSS 입력
@mixin when-xs() { @media (max-width: $screen-xs-max) { @content; } }
@mixin when-sm() { @media (min-width: $screen-sm-min) { @content; } }
@mixin when-md() { @media (min-width: $screen-md-min) { @content; } }
@mixin when-lg() { @media (min-width: $screen-lg-min) { @content; } }사용법 예 :
body {
@include when-md {
background-color: red;
}
}산출
@media (min-width:1200px) {
body {
background-color: red;
}
}