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ł!
css
responsive-design
less
media-queries
Andre Zimpel
źródło
źródło
Odpowiedzi:
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. :)
źródło
@media
Drobnym 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.@media
do zmiennych zdefiniowanych w linii 1 + 2? ➪ szkoda, że czysty@tablet { ...
nie rozwiązuje się wtedy, podczas gdy@media @tablet {...
(skutkuje to@media
oczywiście podwojeniem , jeśli zostanie wzięty na strunę.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).
źródło
+1 dla Nguyen i Yancey - i jeszcze jeden dodatek.
Jeśli chcesz jednoznacznie zdefiniować szerokości, możesz to osiągnąć za pomocą
string interpolation
zmiennych 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; } }
źródło
@tablet
wyłą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
).Możesz też łączyć takie zapytania o media
@media @desktop, @tablet, @ipad{ //common styles... }
źródło
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.
źródło
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; } }
źródło
@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)";
źródło
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; } }
źródło