Fantazyjne zapytania o media zawierające mniej magii

82

Byłoby dobrze opakować style css dla różnych rozdzielczości w ramach niektórych klas css, używając less.

Chciałbym zrobić coś takiego:

footer {
  width: 100%;
}

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

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

Na koniec powinno być coś takiego:

footer {
  width: 100%;
}

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

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

.tablet może wyglądać tak:

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

  }
}

Mam nadzieję, że ktoś ma fajny pomysł!

Andre Zimpel
źródło
możliwy duplikat grupowania zapytań
ScottS,
Opierając się na rozmowie w komentarzach do @zzzzBov, być może potrzebujemy trochę więcej jasności w twoim pytaniu o to , co próbujesz osiągnąć i jak chcesz to osiągnąć.
ScottS,

Odpowiedzi:

237

Oto, co zrobiłem w moich projektach:

@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;
  }
}

Dzięki temu możesz zdefiniować zapytania o media tylko raz i możesz ich używać w mniejszych plikach. Również trochę łatwiejsze do odczytania. :)

Hai Nguyen
źródło
2
To jest niesamowite, dzięki @Hai! @mediaDrobnym problemem w programie Visual Studio jest to, że ten komunikat ostrzegawczy jest generowany przy użyciu w pliku .less: „ Nieoczekiwany blok„ @ ”w regule stylu ”. Nie wydaje się to jednak problemem.
Ian Campbell
Dlaczego nie mogę wciągnąć @mediado zmiennych zdefiniowanych w linii 1 + 2? ➪ szkoda, że ​​czysty @tablet { ...nie rozwiązuje się wtedy, podczas gdy @media @tablet {...(skutkuje to @mediaoczywiście podwojeniem , jeśli zostanie wzięty na strunę.
Frank Nocke
116

Całkowicie zgadzam się z odpowiedzią Hai Nguyen (która została zaakceptowana), ale możesz to trochę bardziej uporządkować, robiąc coś takiego:

@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;
  }
}

Zasadniczo jest to ta sama rzecz, ale pozwala zagnieżdżać zapytania o media wewnątrz oryginalnego selektora. Utrzymuje razem wszystkie css dla określonego elementu i sprawia, że ​​twoje style są znacznie bardziej modułowe (w porównaniu z podejściem z podzielonym punktem przerwania).

Joseph Yancey
źródło
Po przeczytaniu tego znalazłem to Grunt zadanie grupowania MQ po skompilowaniu zagnieżdżonych MQ: github.com/buildingblocks/grunt-combine-media-queries Usuwa nadmiar .
Jazzy
To jest ładne i czyste. Mogę zapytać, dlaczego ~ przed "tylko ...?
Anthony_Z
W LESS, tylda ~ przed literałem "" łańcucha wypisuje łańcuch bez zmian, ponieważ może to być błąd składni w czystym LESS.
Joseph Yancey
1
co jeśli spróbujesz wykonać operację wewnątrz tego „dosłownego ciągu”? Powiedzmy, że chcę użyć zmiennej do określenia rozdzielczości ekranu, na przykład: Czy mogę zrobić coś takiego: ~ "tylko ekran i (min-width: @mySize - 20px)". Wiem, że to nie działa, ale jaki jest właściwy sposób na zrobienie tego?
fablexis
44

+1 dla Nguyen i Yancey - i jeszcze jeden dodatek.

Jeśli chcesz jednoznacznie zdefiniować szerokości, możesz to osiągnąć za pomocą string interpolationzmiennych i dla punktów przerwania. Tutaj, na przykład, w przypadku bootstrapu - ścisłe zasady mają zapobiegać nakładaniu się definicji.

@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;
    }
}
SunnyRed
źródło
O co dokładnie chodzi w tym „-ściśle”, z tego, co napisałeś, nie jestem w stanie zrozumieć konstrukcji. Czy jest jakieś źródło, do którego mógłbyś mi wskazać do dalszej lektury na ten temat?
Kevkong
1
W rzeczywistości „ścisłe zapytania” są dla wygody i powinny być używane tylko wtedy, gdy chcesz, aby Twój CSS dotyczył wyłącznie jednego zakresu ekranów. Korzystając najpierw z telefonu komórkowego (np. Patrz: zellwk.com/blog/how-to-write-mobile-first-css ), powiedziałbym, że ich użycie jest prawdopodobnie trochę zapach projektu i normalnie starałbym się ich unikać . Ale w zależności od okoliczności możesz chcieć, aby jakiś (ciężki) CSS kierował, powiedzmy, @tabletwyłącznie, i nie chcesz go przesłonić, powiedzmy@desktop i / lub @large. W takich przypadkach możesz użyć ścisłego zapytania (tutaj @tablet-strict).
SunnyRed
9

Możesz też łączyć takie zapytania o media

@media @desktop, @tablet, @ipad{ 

//common styles... 

}
spicykimchi
źródło
7

Używamy takiej konfiguracji:

@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(); } };

Musisz tylko ustawić zmienne, miksery obsługują resztę, więc jest bardzo łatwy w utrzymaniu, a jednocześnie elastyczny:

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

Warto wspomnieć, że chociaż ta technika jest bardzo łatwa, jeśli zostanie użyta nieprawidłowo, wynik CSS będzie pełen zapytań o media. Próbuję ograniczyć zapytania o media do 1 na punkt przerwania, na plik. Gdzie plik byłby bez nagłówka lub bez wyszukiwania.

Uwaga: Ta metoda prawdopodobnie nie skompiluje się, chyba że używasz kompilatora javascript.

M_Willett
źródło
4

Używam tych mixins i zmiennych

.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;

Więc to

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

staje się

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;
  }
}
Atul Gupta
źródło
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)";
Sanket Suthar
źródło
0

A oto, czego użyłem w moim projekcie:

    @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;
      }
    }
Sunil Rajput
źródło