약간의 마법이 적은 멋진 미디어 쿼리


81

less를 사용하는 일부 css 클래스 내에서 다른 해상도에 대해 css 스타일을 래핑하는 것이 좋습니다.

다음과 같은 작업을하고 싶습니다.

footer {
  width: 100%;
}

.tablet {
  footer {
    width: 768px;
  }
}

.desktop {
  footer {
    width: 940px;
  }
}

결국 다음과 같은 결과가 나타납니다.

footer {
  width: 100%;
}

@media screen and (min-width: 768px) {
  footer {
    width: 768px;
  }
}

@media screen and (min-width: 992px) {
  footer {
    width: 940px;
  }
}

.tablet는 다음과 같이 보일 수 있습니다.

@media screen and (min-width: 768px) {
  .tablet {

  }
}

누군가가 좋은 아이디어를 가지고 있기를 바랍니다!



@zzzzBov에 의견의 대화를 바탕으로, 아마도 우리는 약 귀하의 질문에 좀 더 명확하게해야 할 무엇을 당신이 달성하기 위해 노력하고 있습니다 어떻게 당신이 그것을 달성하기 위해 원하는됩니다.
ScottS 2013

답변:


234

내 프로젝트에서 내가 한 일은 다음과 같습니다.

@desktop:   ~"only screen and (min-width: 960px) and (max-width: 1199px)";
@tablet:    ~"only screen and (min-width: 720px) and (max-width: 959px)";

@media @desktop {
  footer {
    width: 940px;
  }
}

@media @tablet {
  footer {
    width: 768px;
  }
}

이를 통해 미디어 쿼리를 한 번만 정의 할 수 있으며 적은 파일 전체에서 사용할 수 있습니다. 또한 좀 더 읽기 쉽습니다. :)


2
감사합니다 @Hai! Visual Studio의 사소한 문제 @media는 .less 파일 에서 " 스타일 규칙의 예기치 않은 '@'블록 " 을 사용할 때이 경고 메시지가 생성 된다는 것 입니다. 그래도 문제가되지 않는 것 같습니다.
Ian Campbell

@media라인 1 + 2에 정의 된 변수에를 가져올 수없는 이유는 무엇 입니까? ➪ 순수을 유감 @tablet { ...잠시 후, 해결되지 않는 @media @tablet {...(A 두 배의 결과로 @media물론 문자열로 촬영 한 경우.
프랭크 Nocke에게

116

나는 Hai Nguyen의 대답 (승인 됨)에 완전히 동의하지만 다음과 같이하면 조금 더 정리할 수 있습니다.

@desktop:   ~"only screen and (min-width: 960px) and (max-width: 1199px)";
@tablet:    ~"only screen and (min-width: 720px) and (max-width: 959px)";

footer{
  width: 100%;
  @media @tablet {
    width: 768px;
  }
  @media @desktop {
    width: 940px;
  }
}

본질적으로 동일하지만 원본 선택기 내부에 미디어 쿼리를 중첩 할 수 있습니다. 특정 요소에 대한 모든 CSS를 함께 유지하고 스타일을 훨씬 더 모듈화합니다 (분할 중단 점 접근 방식과 비교).


이것을 읽은 후 중첩 된 MQ가 컴파일 된 후 MQ를 그룹화하는이 Grunt 태스크를 발견했습니다. github.com/buildingblocks/grunt-combine-media-queries 팽창을 제거합니다.
Jazzy

이것은 좋고 깨끗합니다. 내가 물어봐도 될까요 ~ 앞에 "만 ...?
Anthony_Z

LESS에서 문자열 ""리터럴 앞에 물결표 ~는 문자열을있는 그대로 출력합니다. 순수한 LESS에서는 구문 오류 일 수 있기 때문입니다.
Joseph Yancey

1
"리터럴 문자열"내에서 연산을하려고하면 어떻게 될까요? 예를 들어 화면 해상도를 포함하는 변수를 사용하고 싶다고 가정 해 보겠습니다. 예를 들어 다음과 같이 할 수 있습니까? ~ "only screen and (min-width : @mySize-20px)". 작동하지 않는다는 것을 알고 있지만 올바른 방법은 무엇입니까?
fablexis

44

Nguyen과 Yancey의 경우 +1-그리고 하나 더 추가됩니다.

당신이 원하는 경우 명시 적으로 정의 폭의를, 당신은 함께 그것을 달성 할 수있는 string interpolation변수 중단 점에 대해. 예를 들어 부트 스트랩의 경우-엄격한 규칙은 정의 중복을 방지하는 것입니다.

@screen-xs-min:     480px;
@screen-sm-min:     768px;
@screen-md-min:     992px;
@screen-lg-min:     1200px;

@screen-xs-max:     (@screen-sm-min - 1);
@screen-sm-max:     (@screen-md-min - 1);
@screen-md-max:     (@screen-lg-min - 1);

@phone:             ~"only screen and (max-width: @{screen-xs-min})";
@phone-strict:      ~"only screen and (min-width: @{screen-xs-min}) and (max-width: @{screen-xs-max})";
@tablet:            ~"only screen and (min-width: @{screen-sm-min})";
@tablet-strict:     ~"only screen and (min-width: @{screen-sm-min}) and (max-width: @{screen-sm-max})";
@desktop:           ~"only screen and (min-width: @{screen-md-min})";
@desktop-strict:    ~"only screen and (min-width: @{screen-md-min}) and (max-width: @{screen-md-max})";
@large:             ~"only screen and (min-width: @{screen-lg-min})";

footer{
    width: 100%;
    @media @tablet {
        width: 768px;
    }
    @media @desktop {
        width: 940px;
    }
}

이 "엄격한"은 정확히 무엇에 관한 것입니까? 당신이 작성한 것에서 나는 그 구조를 이해할 수 없습니다. 이 주제에 대해 더 자세히 읽어 볼 수있는 출처가 있습니까?
Kevkong 2016 년

1
실제로 "strict-queries"는 편의를위한 것이며 CSS를 단일 화면 범위에만 적용하려는 경우에만 사용해야합니다. 모바일을 먼저 사용할 때 (예 : zellwk.com/blog/how-to-write-mobile-first-css ), 사용이 약간의 디자인 냄새 일 수 있으며 일반적으로 피하려고합니다. . 그러나 상황에 따라 일부 (무거운) CSS를 @tablet독점적 으로 타겟팅 하고, say @desktop및 / 또는 에서이를 재정의하고 싶지 않을 수 있습니다 @large. 이러한 경우 엄격한 쿼리 (여기 @tablet-strict)를 사용할 수 있습니다 .
SunnyRed

9

다음과 같은 미디어 쿼리를 결합 할 수도 있습니다.

@media @desktop, @tablet, @ipad{ 

//common styles... 

}

7

다음과 같은 설정을 사용합니다.

@vp_desktop:    801px;
@vp_tablet:     800px;
@vp_mobile:     400px;

.OnDesktop(@rules) { @media screen and (min-width:@vp_desktop){ @rules(); } };
.OnTablet(@rules) { @media screen and (max-width:@vp_tablet){ @rules(); } };
.OnMobile(@rules) { @media screen and (max-width:@vp_mobile){ @rules(); } };

변수 만 설정하면되고 믹스 인이 나머지를 처리하므로 유지 관리가 매우 쉬우면서도 유연합니다.

div {
  display: inline-block;
  .OnTablet({
    display: block;
  });
}

이 기술은 매우 쉽지만 잘못 사용하면 CSS 출력이 미디어 쿼리로 가득 차게됩니다. 미디어 쿼리를 중단 점당, 파일 당 1 개로 제한하려고합니다. 파일은 header.less 또는 search.less가됩니다.

NB이 메서드는 자바 스크립트 컴파일러를 사용하지 않는 한 컴파일되지 않을 것입니다.


4

이 믹스 인 및 변수를 사용하고 있습니다.

.max(@max; @rules){@media only screen and (max-width: (@max - 1)){@rules();}}
.min(@min; @rules){@media only screen and (min-width: @min){@rules();}}
.bw(@min; @max; @rules){@media only screen and (min-width: @min) and (max-width: (@max - 1)){@rules();}}

@pad: 480px;
@tab: 800px;
@desktop: 992px;
@hd: 1200px;

그래서 이건

footer{
    width: 100%;
    .bw(@tab,@desktop,{
        width: 768px;
    });
    .min(@desktop,{
        width: 940px;
    });
}

된다

footer {
  width: 100%;
}
@media only screen and (min-width: 800px) and (max-width: 991px) {
  footer {
    width: 768px;
  }
}
@media only screen and (min-width: 992px) {
  footer {
    width: 940px;
  }
}

0
@highdensity:  ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
               ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
               ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
               ~"only screen and (min-device-pixel-ratio: 1.5)";

@mobile:        ~"only screen and (max-width: 750px)";
@tab:       ~"only screen and (min-width: 751px) and (max-width: 900px)";
@regular:        ~"only screen and (min-width: 901px) and (max-width: 1280px)";
@extra-large:  ~"only screen and (min-width: 1281px)";

0

그리고 이것은 내 프로젝트에 사용한 것입니다.

    @mobile:   ~"only screen and (min-width: 320px) and (max-width: 767px)";
    @tablet:    ~"only screen and (min-width: 768px) and (max-width: 991px)";
    @ipad:    ~"only screen and (min-width: 992px) and (max-width: 1024px)";

    @media @mobile {
      .banner{
        width: auto;
      }
    }

    @media @tablet {
      .banner{
        width: 720px;
      }
    }

  @media @ipad {
      .banner{
        width: 920px;
      }
    }
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.