Fancy Media Queries with some LESS Magic
Byłoby miło zawijać style css dla różnych rozdzielczości w niektórych klasach css używając mniej.
Chciałbym zrobić coś takiego:
footer {
width: 100%;
}
.tablet {
footer {
width: 768px;
}
}
.desktop {
footer {
width: 940px;
}
}
Na końcu coś takiego powinno być wynikiem:
footer {
width: 100%;
}
@media screen and (min-width: 768px) {
footer {
width: 768px;
}
}
@media screen and (min-width: 992px) {
footer {
width: 940px;
}
}
.tablet mógłby wyglądać jakoś tak:
@media screen and (min-width: 768px) {
.tablet {
}
}
Mam nadzieję, że ktoś ma dobry pomysł! 8 answers
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;
}
}
Pozwala to na zdefiniowanie zapytań o media tylko raz i można ich używać w plikach less. Również trochę łatwiejsze do odczytania. :)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-05 19:38:34
W pełni zgadzam się z odpowiedzią Hai Nguyen (która została zaakceptowana), ale można ją trochę bardziej posprzątać 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;
}
}
To zasadniczo to samo, ale pozwala zagnieżdżać zapytania multimedialne wewnątrz oryginalnego selektora. Utrzymuje wszystkie css dla określonego elementu razem i sprawia, że style są znacznie bardziej modułowe (w porównaniu z podejściem split breakpoint).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-19 03:27:42
+ 1 dla Nguyen i Yancey - i jeszcze jeden dodatek.
Jeśli chcesz jawnej definicji szerokości, możesz to osiągnąć za pomocą string interpolation
i zmiennych dla punktów przerwania. Tutaj na przykład z tymi z bootstrap - ścisłe reguły 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;
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-03-05 03:54:42
I możesz również łączyć zapytania o media, takie jak to
@media @desktop, @tablet, @ipad{
//common styles...
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-07 04:24:12
Używamy konfiguracji takiej jak:
@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, mixiny obsługują resztę, więc jest bardzo łatwy w utrzymaniu, ale nadal elastyczny:
div {
display: inline-block;
.OnTablet({
display: block;
});
}
Warto wspomnieć, że chociaż ta technika jest bardzo łatwa, jeśli jest źle używana, twoje wyjście CSS będzie pełne zapytań o media. Staram się ograniczyć moje zapytania o media do 1 na punkt przerwania, na plik. Gdzie plik byłby nagłówkiem.mniej lub Szukaj.mniej.
N. B. ta metoda prawdopodobnie się nie skompiluje, chyba że używasz kompilator javascript.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-02 15:23:32
Używam tych mixinów 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;
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-01 18:42:31
@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)";
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-08-10 09:58:36
I to jest to, co wykorzystałem do mojego projektu:
@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;
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-08-10 10:22:34