Fancy Media Queries z niektórymi LESS Magic

Question

Byłoby miło owinąć 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 koniec 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 może wyglądać jakoś tak:

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

    } 
} 

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

Answer 1

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

To pozwala zdefiniować tylko zapytania multimedialne raz i można go używać w całym swoim mniejszych plików. Również trochę łatwiejsze do odczytania. :)

Answer 2

I całkowicie zgadzam się z odpowiedzią Hai Nguyen (który został zaakceptowany), ale można je posprzątać trochę więcej, 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 w zasadzie to samo, ale pozwala gniazdo zapytania o media w oryginalnym selektorze. Zachowuje wszystkie css dla konkretnego elementu razem i sprawia, że ​​twoje style są bardziej modularne (w porównaniu z podejściem split breakpoint).

Answer 3

+1 dla Nguyena i Yanceya - i jeszcze jeden dodatek.

Jeśli chcesz uzyskać wyraźną definicję szerokości, możesz to zrobić przy pomocy string interpolation i zmiennych dla twoich punktów przerwania. Tutaj na przykład z bootstrap - ścisłe zasady mają zapobiegać nakładaniu się definicji.

/* 
    setup 
*/ 

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

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

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

/* 
    usage 
*/ 

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

Answer 4

I można również łączyć zapytania mediów jak ten

@media @desktop, @tablet, @ipad{ 

//common styles... 

} 

Answer 5

jestem przy użyciu tych wstawek & zmienne

.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

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

Answer 6

Używamy konfigurację takiego:

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

Wystarczy tylko ustawić zmiennych, wstawek obsłużyć resztę więc jest bardzo łatwe w utrzymaniu, a jednocześnie elastyczny:

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

Warto wspomnieć, że chociaż ta technika jest bardzo łatwa, jeśli źle ją wykorzystasz, Twój wynik CSS będzie pełen zapytań o media. Próbuję ograniczyć liczbę zapytań o media do 1 na punkt przerwania na plik. Gdzie plik byłby header.less lub search.less.

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