Fancy Media Queries with some LESS Magic

less media queries mixin
less media query variable
media query not working
css media queries
media query breakpoints
scss media query
css media query less than 768
less media queries mixins

It would be nice to wrap css-styles for different resolutions within some css-classes using less.

I'd like to do something like:

footer {
  width: 100%;
}

.tablet {
  footer {
    width: 768px;
  }
}

.desktop {
  footer {
    width: 940px;
  }
}

At the end something like this should be the result:

footer {
  width: 100%;
}

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

@media screen and (min-width: 992px) {
  footer {
    width: 940px;
  }
}

.tablet could look somehow like this:

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

  }
}

Hope somebody has a nice idea!

Here is what I've done in my projects:

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

This allows you to only define your media queries once and you can use it throughout your less files. Also a little easier to read. :)

Fancy Media Queries with some LESS Magic, It would be nice to wrap css-styles for different resolutions within some css- classes using less. I'd like to do something like: footer { width: 100%; }� The magic happens in two parts—immediately at the top of the file, we’ve set a number of Less variables, which encapsulate the media definition strings we use in the queries. Here, we’ve created four definitions, ranging from @small (for devices between 520px to 699px ), right through to @xlarge for widths of 1151px or more.

I completely agree with Hai Nguyen's answer (which has been accepted) but you can clean it up a bit more by doing something like this:

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

It's essentially the same thing but lets you nest your media queries inside of the original selector. It keeps all css for a specific element together and makes your styles much more modular (vs the split breakpoint approach).

css3 — Fancy Media Queries với một số LESS Magic, Sẽ rất hay nếu bọc kiểu css cho c�c độ ph�n giải kh�c nhau trong một số lớp css sử dụng �t hơn.T�i muốn l�m một c�i g� đ� như:footer { width: 100%; } .tablet� css3 - Fancy Media Queries with some LESS Magic; less - Is it possible to use vh minus pixels in a CSS calc()? css3 - Calc of max, or max of calc in CSS; css3 - Disable LESS-CSS Overwriting calc() css3 - Sass Variable in CSS calc() function

+1 for Nguyen and Yancey - and one more addition.

If you want explicit definition of the widths, you can accomplish that with string interpolation and variables for your breakpoints. Here for example with those of bootstrap - the strict rules are to prevent definition overlapping.

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

CSS Media Queries & Using Available Space, We've covered using CSS media queries to assign different stylesheets technique though, so in this tutorial we'll go over a design tweak with a smaller scope. We'll also cover the syntax for using media queries within a single stylesheet and� Write custom Less functions in Less itself: group-css-media-queries: Group CSS media queries: inline-urls: Convert url() to a call to data-uri() lesshint: Lint your Less: lists: Lists/arrays manipulation (incl. loops) pleeease: Postprocess using pleeease: rtl: Reverse from ltr to rtl: variables-output: Export top-level variables to a JSON file

And you can also combine media queries like this

@media @desktop, @tablet, @ipad{ 

//common styles... 

}

Adaptive web design using the Less Framework, This post is a description of a modified version of the Less framework by Joni Korpi, which I'm A fluid-width website together with mediaqueries using 2 or 3 of the The word-wrap is needed, because sometimes humans use fancy words. By modifying the Less framework and adding some JS magic to it we get a very � 115 Fancy Media Queries with some LESS Magic Nov 19 '13 3 Capturing SOAP messages in C# client Nov 26 '12 2 Converting a string stored in JSON array to variable name in PHP Jun 4 '18

We use a setup like this:

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

You only need to set variables, the mixins handle the rest so it's very easy to maintain yet still flexible:

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

It is worth mentioning that while this technique is very easy, if used badly your CSS output will be full of media queries. I try to limit my media queries to 1 per-breakpoint, per-file. Where a file would be header.less or search.less.

N.B. This method probably won't compile unless you're using the javascript compiler.

What is Mobile First CSS and Why Does It Rock?, Codily (we just made that up): Writing CSS in such a way that smaller Now, there are tons of considerations that go into making this magic happen, and we'll get to that in a minute. Media query with a slightly larger min-width breakpoint generating special mobile comps, although that sounds luxurious and lovely. Based on bisio's answer and the Bootstrap 3 code, I was able to come up with a more accurate answer for anyone just looking to copy and paste the complete media query set into their stylesheet:

Journey to Highly Effective and Maintainable CSS Media Queries , When I was a newbie, I remember writing all my media queries at the to EM- based queries; Provides well described various kinds of fancy Based on Zell's tests, the only unit that performs bug-less across all With responsive design, it's easy to get caught up in all the media query magic and go crazy. Vasilis van Gemert’s talk Look, no media queries provided me with the impetus to investigate media query-less responsive design, which in turn led me to write this article. His talk is well

Site Name: Author: Stylesheet: Main Stylesheet Here's where the , Site Name: Author: Stylesheet: Main Stylesheet Here's where the magic happens. Here, you'll see we are calling in the separate media queries. The base mobile goes outside any query and is called at the beginning, after that we call the rest IMPORTING STYLES // // import normalize @import "_normalize.less"; // import� I prefer em-based media queries because if the user decides to zoom-in their browser will pick up the media queries and see the responsive site, thus the website never breaks. Also, some devices report a higher font size than 16px and if that’s the case they will also see the responsive site because of the em-based MQs.

Media Query Css For All Devices With Example, However, the actual experience was far less pleasant than I had hoped. Media query is a really fancy term for "conditional CSS rule". so you can check it out here, but hop over to CodePen to load it up full screen to see the magic happen. Despite the super fun sounding name, magic numbers are a bad thing. It is an old school programming term for “unnamed numerical constant”. As in, just some number plunked into the code that is probably vital to things working correctly but are very difficult for anyone not intimately familiar with the code to understand what it is for.

Comments
  • possible duplicate of Media Query grouping instead of multiple scattered media queries that match
  • Based on the conversation in the comments to @zzzzBov, perhaps we need a bit more clarity in your question about what you are trying to achieve and how you are wanting to achieve it.
  • This is awesome, thanks @Hai! A minor issue in Visual Studio is that this warning message is generated on the usage of @media in a .less file: "Unexpected '@' block in the style rule". It doesn't seem to be a problem though.
  • Why can't I pull the @media into the variables defined in line 1+2 ? ➪ regrettable a pure @tablet { ... doesn't resolve then, while a @media @tablet {... (resulting in a doubled @media of course, if taken into the string.
  • After reading this, I found this Grunt task to group the MQs after the nested MQs are compiled: github.com/buildingblocks/grunt-combine-media-queries Removes the bloat.
  • This is nice and clean. Can I ask, why the ~ in front of "only...?
  • In LESS, a tilde ~ before a string "" literal outputs the string as-is, because it may be a syntax error in pure LESS.
  • what if you try to make an operation inside of that "literal string"? Let's say that I want to use a variable to contain the screen resolution, for instance: Can I do something like: ~"only screen and (min-width: @mySize - 20px)". I know it does not work, but what's the correct way for doing that?
  • What is this "-strict" excactly about, from what you have written I am not capable of understanding the construct. Is there any source you could point me to for further reading on this topic?
  • Actually, the "strict-queries" are for convenience and should only be used, if you want your CSS to apply to a single screen range exclusively. When using mobile first (e.g. see: zellwk.com/blog/how-to-write-mobile-first-css), I would say, that their usage is possibly a bit of a design smell and I would normally try to avoid them. But depending on the circumstances you might want some (heavy) CSS to target, say @tablet exclusively, and you do not want to override it in, say @desktop and/or @large. In these cases, you can use a strict query (here @tablet-strict).