utilizarea interogărilor media cu LESS (Programare, Css, Less)

mike a intrebat.

Am văzut o mulțime de mesaje despre cuibărirea media queries în LESS, așa că nu vreau să repet nimic din toate acestea sau să pierd timpul nimănui, dar întrebarea mea este ușor diferită. Am o interogare media imbricate în interiorul unui .less fișier cu acest cod:

@media only screen and (max-width: 420px), only screen and (max-device-width: 420px){}

Deci, care este pe login.less astfel încât pagina mea de conectare să fie mai receptivă. Vreau să fac o altă pagină responsive, de asemenea, astfel încât în pagina mea aboutMe.less Am adăugat și eu același cod:

@media only screen and (max-width: 420px), only screen and (max-device-width: 420px){}

dar nu se declanșează deloc. Nu poți avea două media queries de același tip în css? Așadar, ar trebui să fac un .less fișier mediaqueries.less și să am doar o singură instanță a acestui lucru:

@media only screen and (max-width: 420px), only screen and (max-device-width: 420px){}

și să pun tot codul site-urilor pe care vreau ca această interogare să se declanșeze acolo, sau este posibil să adăugați aceeași interogare oriunde doriți în interiorul fișierelor imbricate mai puțin și eu doar fac ceva greșit?

Mulțumesc!

1 răspunsuri
Martin

CSS suportă mai multe interogări media identice, dacă doriți, dar CSS nu suportă cuibăritul.

LESS, pe de altă parte, suportă câteva metode de anidare a interogărilor media. Puteți citi despre asta aici: http://lesscss.org/features/#extend-feature-scoping-extend-inside-media

Exemplu:

@media screen {
  @media (min-width: 1023px) {
    .selector {
      color: blue;
    }
  }
}

Compilează la:

@media screen and (min-width: 1023px) {
  .selector {
    color: blue;
  }
}

LESS suportă, de asemenea, cuibăritul de interogări media sub selectori, astfel:

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

Se compilează la:

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

Dacă acest lucru nu răspunde la întrebarea dumneavoastră, vă rugăm să postați partea relevantă a fișierului (fișierelor) LESS.

Comentarii

  • Se pare că interogarea media imbricate a început să funcționeze zilele trecute. Cred că am încurcat css-ul undeva și când am refactorizat o grămadă de lucruri, interogarea media a început să funcționeze. Mulțumesc pentru informații, aceasta este o referință excelentă pentru mine! –  > Por mike.

Tags:,