I have two media query combined like below in my scss file:
#media all and (min-width: 600px) and (orientation: portrait),
// add css rule to the above media query
all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait) {
border: 1px solid #red
// add specific css rule to current media query only
}
How would I add a specific rule for each query in that case?
I am afraid you can't do that. This is one query, with two sets of rules, there is no "current" query. You can repeat the rules in new queries like this:
#media all and (min-width: 600px) and (orientation: portrait) {
// styles
}
#media all and (min-width: 600px) and (orientation: portrait),
all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait) {
// shared styles
}
ps: you are missing the class declaration on your example
You can use variables to save queries. Also nest #media to keep them organized because all #media rules won't be nested in CSS. It would be nice to interpolate in #media rules but it is not working yet.
$media: 'all and (min-width: 600px) and (orientation: portrait)';
$media2: 'all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait)';
#media #{$media} {
color:red;
#media #{$media}, #{$media2} {
color:blue;
}
}
Related
I'm trying to create some common breakpoints for mediaqueries in my angular app. I'm using scss. I repeat this 3 lines everywhere and I want to improve it:
#media screen and (orientation: landscape) and (max-width: 959px),
screen and (orientation: portrait) and (max-width: 599px) {
#media screen and (orientation: landscape) and (max-width: 959px) {
#media screen and (orientation: portrait) and (max-width: 599px) {
I want to create some variables for including this, but I'm not getting it, it should be something like:
$mobile = "screen and (orientation: landscape) and (max-width: 959px),
screen and (orientation: portrait) and (max-width: 599px)"
$landscape_mobile = "screen and (orientation: landscape) and (max-width: 959px)"
$portrait_mobile = "screen and (orientation: portrait) and (max-width: 599px)"
is it possible to be done?
You can create a mixin and use it whenever you want
#mixin breakpoint($point) {
#if $point == desktop {
#media (min-width: 1400px) { #content; }
}
}
// Use like this
div {
#include breakpoint(desktop) {
display: none;
}
}
Variables are defined using a :, not =.
You can use them this way:
$mobile: "screen and (orientation: landscape) and (max-width: 959px),
screen and (orientation: portrait) and (max-width: 599px)";
$landscape_mobile: "screen and (orientation: landscape) and (max-width: 959px)";
$portrait_mobile: "screen and (orientation: portrait) and (max-width: 599px)";
#media #{$mobile} { ... }
#media #{$landscape_mobile} { ... }
#media #{$portrait_mobile} { ... }
Note the interpolation syntax #{}.
More about Sass interpolation
I ried to put comma to combine media query but didnt work
#media all and (min-width: 600px) and (orientation: portrait),
#media all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait) {}
any ideas how to do that in scss?
get rid of #media on the second line:
#media all and (min-width: 600px) and (orientation: portrait),
all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait) {}
That has nothing to do with SCSS by the way. It is how you declare media queries in plain css too. Here is some documentation, refer to comma-separated lists - https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
I've used nested media queries for the first time in a responsive website I've created. These help the website look as I want to in 12" laptops and portrait Ipads for instance and they work fine with all browsers except for Internet Explorer 11 (and below for that matter).
Checking on caniuse it specifies that nested media queries are not supported on IE11.
This is how the CSS looks like:
#media all and (max-width: 1024px) {
#media all and (max-height: 860px) {
/*Some code*/
}
#media all and (min-height: 769px) {
/*Some Code*/
}
}
What can I do or use so that these media queries will work on IE11?
You can unnest them like this:
#media all and (max-width: 1024px) and (max-height: 860px) {
/*Some code*/
}
#media all and (max-width: 1024px) and (min-height: 769px) {
/*Some Code*/
}
Or you can look into using a less compiler which would do that for you (as well as numerous other features as well). Even with less, you should consider changing your code so that all isn't repeated again, like this:
#media all and (max-width: 1024px) {
#media (max-height: 860px) {
/*Some code*/
}
#media (min-height: 769px) {
/*Some Code*/
}
}
Media query for Motorola e(2nd generation). Kindly post the media query. #media only screen
and (min-width: 480px)
and (max-width: 960px) and (orientation:portrait) is not working
your syntax may be wrong as posible so try this
#media screen and (min-width: 480px) and (max-width: 960px) {
//Your Code
}
Is this possible? It seems like a neat solution to me, but I'm not sure if it will work.
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Code for both portrait and landscape */
#media (orientation:portrait) {
/* Code for just portrait */
}
#media (orientation:landscape) {
/* Code for just landscape */
}
}
You should be able to nest #media rules this way in CSS3, but it isn't yet supported by most browsers. See this answer for details.
You would have to fully expand and repeat the top-level media queries for the inner rules for it to work across browsers (and I imagine the SCSS processor would generate something similar):
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
/* Code for both portrait and landscape */
}
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation: portrait) {
/* Code for just portrait */
}
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation: landscape) {
/* Code for just landscape */
}
If you wanted to do this the best way is to use the high level media query in a link tag, and then the other queries inside the linked sheet.
In practice though most people cascade their CSS rules from a base sheet that covers the common stuff and then putting changes to that in each media rule-set.
I think not possible but you can write this format If you are using SASS css pre-processor.
example , you can copy this code and paste to https://www.sassmeister.com/ -and watch the output
SASS
#media only screen and (max-width: 767px) {
body{
color:red;
}
#media (orientation:portrait) {
body{
color:green;
}
}
#media (orientation:landscape) {
body{
color:orange;
}
}
}
Output CSS
#media only screen and (max-width: 767px) {
body {
color: red;
}
}
#media only screen and (max-width: 767px) and (orientation: portrait) {
body {
color: green;
}
}
#media only screen and (max-width: 767px) and (orientation: landscape) {
body {
color: orange;
}
}