I try to do this in LESS
#screen-lg : 1200px;
#laptop : ~"only screen and (min-width: 768px) and (max-width: #{calc(screen-lg - 1px)})";
to target until 1199px. But its doesn't like it.
Is it possible to operate with calc() function in a string var ?
Thanks.
I don't think that you need any calc there. You can get what you want with:
1
#screen-lg: 1200px;
#screen-lg-max: (#screen-lg - 1);
#laptop: ~"only screen and (min-width: 768px) and (max-width: #{screen-lg-max})";
#media #laptop {
color: red;
}
2
#screen-lg: 1200px;
#laptop: ~"only screen and (min-width: 768px) and (max-width:" (#screen-lg - 1) ~")";
#media #laptop {
color: red;
}
3
(Less 1.7.0):
#screen-lg: 1200px;
.laptop(#styles) {
#media screen and (min-width: 768px) and (max-width: (#screen-lg - 1)) {
#styles();
}
}
.laptop({
color: red;
});
All three snippets above result in the following CSS:
#media only screen and (min-width: 768px) and (max-width: 1199px) {
color: red;
}
Media queries must be evaluated at runtime, and less is usually compiled at build time. To do this kind of stuff you'll probably need client side Javascript version http://lesscss.org/#client-side-usage , and recompile less script each time there's a window resize, so probably has no point to do it using less and you'll do it faster (and cleaner) in Javascript.
That being said, if you try this you'll probably have to do it backwards (i.e. wrap your less variable inside a media query). But I'm not sure at all this makes sense.
Since Less is parsed at build time, you can just use the built in math features. There is no need for calc. This works just fine:
#screen-lg : 1200px;
#laptopsize: #screen-lg - 1px;
#laptop: ~"only screen and (min-width: 768px) and (max-width: #{laptopsize})";
#media #laptop {
div{background: black;}
}
Related
So what I have is one with max-width: 992px, another is max-height: 732px and max-width: 992px. What I want is to media screen do something only if both height and width are lower than max.
I have this:
#media screen and (max-height: 753px) and (max-width: 992px){
}
How it should be?
Nvm, just place #media screen inside another.
You can use nested media queries. Something like this
#media (max-width:992px) {
#media (max-height:432px) {
.test-div{
background-color: blue;
}
}
}
Maybe this works well in your case
#media screen and (max-height: 753px) , screen and (max-width: 992px) {
....
....
}
Check Documentation Here
You should use only end in between your height and width property
#media (max-width: 992px) and (max-height: 732px) {
/* CSS stuff */
}
let me say as first I am a CSS noob. I can freely accept any blaming
#media (max-width: 735px) {... }
#media (min-width: 735px) {... }
#media (width: 320px) {... }
#media (width: 360px) {... }
#media (width: 375px) {... }
#media (width: 414px) {... }
I have these things for able to make it sensitive.
I wanted to use max-width but failed not sure why but browser always choose another max-width expression and executes it so I just collected the mobile phone's width and made this.
And also I want to send same content to who has 360px and 320px is there any "or" expression may be I can minify it.
If I got it correct from your question, you can add the following media query.
#media (min-width: 320px) and (max-width: 360px) {
html { color: blue; }
}
I recommended using a different approach, either mobile first or desktop first using media queries. In that way you can simply address the correct layout to a lot of people without writing exceptions.
Mobile first
html { color: purple; }
#media (min-width: 600px) {
html { color: black; }
}
/* And go up the road */
Desktop first
html { color: purple; }
#media (max-width: 600px) {
html { color: black; }
}
/* And go down the road */
#media only screen and (min-width : 1824px) {}
#media only screen and (min-width : 1224px) {}
I am using these mediaqueries and these are working fine but when I see my website at 1280px resolution, it does not work
Try like this:
#media screen and (min-width: 1024px) and and (max-width:1280px)
{
.....
}
#HMS Designz, If you want to access media query 1280 to 1024 resolution. You can try like this.
#media screen and (min-width:1024px) and (max-width:1280px) {}
#media all and (min-width: 1280px) {
/* css for width greater than 1280px */
}
#media all and (max-width: 1280px) and (min-width: 1024px) {
/* css for width between 1280px and 1024px */
}
#media all and (max-width: 1023px) {
/* css for width less than 1024px */
}
Here is detailed explainition of media queries.
include this in <head></head> (if you have not)
<meta name="viewport" content="width=device-width, user-scalable=no" /> <-- user-scalable=yes if you want user to allow zoom -->
change you #media style as this // change width as per your requirements
#media only screen (max-width: 500px) {
// or as per your needs, as I try to explain below
}
Now I try to explain maybe..:)
#media (max-width:500px)
for a window with a max-width of 500px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases.
#media screen and (max-width:500px)
for a device with a screen and a window with max-width of 500px apply the style. This is almost identical to the above except you are specifying screen as opposed to the other media types the most common other one being print.
#media only screen and (max-width:500px)
Here is a quote straight from W3C to explain this one.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
As there is no such media type as "only", the style sheet should be ignored by older browsers.
If
That's what media queries are: logical if statements. "If" these things are true about the browser, use the CSS inside.
And
The keyword and.
#media (min-width: 600px) and (max-width: 800px) {
html { background: red; }
}
Or
Comma separate.
#media (max-width: 600px), (min-width: 800px) {
html { background: red; }
}
Technically these are treated like to separate media queries, but that is effectively and or.
Not
Reverse the logic with the keyword not.
#media not all and (max-width: 600px) {
html { background: red; }
}
Just doing not (max-width: 600px) doesn't seem to work for me, hence the slightly funky syntax above. Perhaps someone can explain that to me. Note that not only works for the current media query, so if you comma separate, it only affects the media query it is within. Also note that not reverses the logic for the entire media query as a whole, not individual parts of it. not x and y = not (x and y) ≠ (not x) and y
Exclusive
To ensure that only one media query is in effect at time, make the numbers (or whatever) such that that is possible. It may be easier to mentally manage them this way.
#media (max-width: 400px) {
html { background: red; }
}
#media (min-width: 401px) and (max-width: 800px) {
html { background: green; }
}
#media (min-width: 801px) {
html { background: blue; }
}
Logically this is a bit like a switch statement, only without a simple way to do "if none of these match do this" like default.
Overriding
There is nothing preventing more than one media query from being true at the same time. It may be more efficient to use this in some cases rather than making them all exclusive.
#media (min-width: 400px) {
html { background: red; }
}
#media (min-width: 600px) {
html { background: green; }
}
#media (min-width: 800px) {
html { background: blue; }
}
Media queries add no specificity to the selectors they contain, but source order still matters. The above will work because they are ordered correctly. Swap that order and at browser window widths above 800px the background would be red, perhaps inquisitively.
Mobile First
Your small screen styles are in your regular screen CSS and then as the screen gets larger you override what you need to. So, min-width media queries in general.
html { background: red; }
#media (min-width: 600px) {
html { background: green; }
}
Desktop First
Your large screen styles are in your regular screen CSS and then as the screen gets smaller you override what you need to. So, max-width media queries in general.
html { background: red; }
#media (max-width: 600px) {
html { background: green; }
}
You can be as complex as you want with this.
#media
only screen and (min-width: 100px),
not all and (min-width: 100px),
not print and (min-height: 100px),
(color),
(min-height: 100px) and (max-height: 1000px),
handheld and (orientation: landscape)
{
html { background: red; }
}
Note the only keyword was intended to prevent non-media-query supporting browsers to not load the stylesheet or use the styles. Not sure how useful that ever was / still is.
And for media queries priorites
sources : one two three four five
You are not create any media query for 1280 px resolutions. First create media query for that resolution using following media query.
#media screen and (min-width:1024) and (max-width:1280px)
{
}
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!
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).
For media rules on less my recommendation is use Escaping.
Sample
#min768: (min-width: 768px);
.element {
#media #min768 {
font-size: 1.2rem;
}
}
I am very keen to use media queries in my CSS but i am confused to how to use it. I have stand
my queries requirement is
if screen width is 100 to 480 then different style comes,
if screen width 481 to 600 then different style comes,
if screen width 601 to 800 then different style comes,
if screen width 801 then default CSS should work.
.class { /* default style */ }
#media (min-width: 100px) and (max-width: 480px) {
.class { /* style */ }
}
#media (min-width: 481px) and (max-width: 600px) {
.class { /* style */ }
}
#media (min-width: 601px) and (max-width: 800px) {
.class { /* style */ }
}
The basic relies on using this kind of queries:
#media (min-width: 768px) and (max-width: 979px) {
/*here goes the exact changes you need to make in order to make
your site pretty on this range.*/
}
Please remember that when using responsive web design you should use percentages when possible also em for fonts.
media queries are now available for IE.
take a look in http://caniuse.com/#feat=css-mediaqueries when you can use them.
A polyfil I been using with good results is response.js
I believe something along the lines of:
#media screen and (min-width: 100px) and (max-width: 480px)
{
/* Change main container '.wrapper' */
.wrapper
{
width: 100px;
}
}
#media screen and (min-width: 480px) and (max-width: 600px)
{
.wrapper
{
width: 480px;
}
}
..etc