LESS CSS set variables in media query?

Question

I\'m working on a iPad-specific website. To make my website work on both the retina display iPad and older versions of iPads, I want to set a variable in LESS CSS in media q

Answer 1

With less we can define variables for media query.
first of all detect iPad resolution:

@iPad: ~"only screen and (min-width: 40.063em) and (max-width: 64em);

These are em equivalent of 641px and 1024px.


Now detect high resolution:

@highResolution: ~"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)";

Now we can combine these 2 variables in a media query like this:

@media @iPad, @highResolution{ .yourCssClass{} }

this will be valid just on iPad (or similar resolutions) with retina display (or similar pixel density).