Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

using media queries with LESS

Tags:

css

less

I've seen a lot of posts about nesting media queries in LESS so I dont want to repeat any of that or waste anyones time but my question is slightly different. I have a nested media query inside a .less file with this code:

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

So that is on my login.less so my login page will be more responsive. I want to make another page responsive as well so in my aboutMe.less I also added the same code:

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

but its not triggering at all. Can you not have two media queries of the same type in css? So I would need to make a .less file mediaqueries.less and only have one instance of this:

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

and put all the sites code that I want that query to trigger in there, or is it possible to add the same query anywhere you want inside nested less files and im just doing something wrong?

Thanks!

like image 433
mike Avatar asked Feb 22 '14 02:02

mike


People also ask

What size media queries should I use?

481px — 768px: iPads, Tablets. 769px — 1024px: Small screens, laptops. 1025px — 1200px: Desktops, large screens. 1201px and more — Extra large screens, TV.

How do you give a media query a minimum width and maximum width?

Combining media query expressions Max-width and min-width can be used together to target a specific range of screen sizes. @media only screen and (max-width: 600px) and (min-width: 400px) {...} The query above will trigger only for screens that are 600-400px wide.

Do media queries affect performance?

Short answer, not at all.


1 Answers

CSS supports multiple identical media queries, if you like, but CSS doesnt support nesting.

LESS, on the other hand, does support a few methods for nesting media queries. You can read about it here: http://lesscss.org/features/#extend-feature-scoping-extend-inside-media

Example:

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

Compiles to:

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

LESS also supports nesting media queries below selectors like this:

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

Compiles to:

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

If this doesnt answer your question, then please post the relevant part of your LESS file(s).

like image 59
Martin Avatar answered Oct 16 '22 05:10

Martin