I have several custom-media query definitions set up, things like:
#custom-media --mobile (width < 535px);
#custom-media --tablet (801px <= width < 1025px);
#custom-media --desktop (width >= 1025px);
...
In which I use like:
#media (--mobile) {
// Some mobile styles here
}
I know that we can perform a combination of media queries with the and join like:
#media (min-width: 30em) and (orientation: landscape) { ...
Is there any way in which I can define a media query that utilises 2 of my custom-media variables, to have a certain style like:
#media (--mobile) and (--desktop) {
// Styles that only apply at mobile and desktop sizes
}
Related
// Extra small devices (portrait phones, less than 576px)
#media (max-width: 575.98px) { ... }
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) and (max-width: 991.98px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
Code sample source: https://getbootstrap.com/docs/4.1/layout/overview/
What's the reason for using .98px? Cross-browser compatibility?
Related: What are the rules for CSS media query overlap?
There isn't a good way to make two px-based #media rules mutually exclusive with no gap without repeating the same media query twice and using the not keyword — which isn't very readable much less DRY — and the < and > syntax new to Media Queries 4 isn't widely supported yet. As you've seen in my answer to the linked question, a viewport that is (in this example) exactly 576px wide will match both max-width: 576px and min-width: 576px simultaneously, which can cause issues (some cascading some not) as properties from both rules will be applied. Most authors therefore choose to have min- and max- constraints with a difference of 1 pixel, or less if they're worried about high-resolution displays with non-integer pixel densities that don't scale every CSS pixel to full device pixels (e.g. 1.5).
Indeed, cross-browser compatibility is the reason: according to Bootstrap's source, 0.02px is used "rather than 0.01px to work around a current rounding bug in Safari. See https://bugs.webkit.org/show_bug.cgi?id=178261" (that, predictably, as of July 2018 still hasn't been fixed). Starting from line 31 of _breakpoints.scss:
// Maximum breakpoint width. Null for the largest (last) breakpoint.
// The maximum value is calculated as the minimum of the next one less 0.02px
// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
// See https://bugs.webkit.org/show_bug.cgi?id=178261
//
// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// 767.98px
#function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
$next: breakpoint-next($name, $breakpoints);
#return if($next, breakpoint-min($next, $breakpoints) - .02px, null);
}
which media condition will win in the given code below?
.img {
background-image: url(small.jpg);
}
#media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.img {
background-image: url(medium.jpg);
}
}
#media (min-width: 800px) {
.img {
background-image: url(large.jpg);
}
}
There arises two possibilities.
Suppose the screen is greater than 800px and also has device-pixel-ratio equals to 2, then both the media queries resolves to true.
which image will be retrieved?
and is there any chance that both will get requested at the runtime
(though only one will shown up overriding the anther)
impacting(degrading) the performance by causing loading-time
overhead?
Well, going by the rules of cascading it should be the last one. but I'm not sure if media queries have any kind of specificity like how an ID trumps a class.
This was marked duplicate of What are the rules for CSS media query overlap? but there is another aspect of this question(mentioned in point-2) which is not addressed in that marked-duplicate.
I just came across a weird thing and was wondering if this is expected behaviour or indeed some sort of bug.
My intention is to write the following code but I narrowed down the issue (see below).
#media only screen
and (
(-webkit-min-device-pixel-ratio: 1.2), /* or */
(min-resolution: 120dpi)
) { ... }
This code works:
#media only screen
and (-webkit-min-device-pixel-ratio: 1.2) { ... }
adding extra outside parentheses (round brackets), this fails:
#media only screen
and ( (-webkit-min-device-pixel-ratio: 1.2) ) { ... }
The target platform is latest Chrome on Android 5.1, but I'm open to hear comments on other platforms too.
It depends on what behavior you need to approach. Whether you need and or or for those rules
If you want to apply both of rules for media query, you need to use and logical operator
#media only screen and (-webkit-min-device-pixel-ratio: 1.2)
and (min-resolution: 120dpi)
{ ... }
If you want to apply any one of the rules for media query, you need to use comma :
#media only screen and (-webkit-min-device-pixel-ratio: 1.2),
only screen and (min-resolution: 120dpi)
{ ... }
this is all my code:
/* 1366 ----------- */
#media (min-width : 1326px) and (max-width : 1639px){
body {
background-image:url('http://evoxity.net/modules/themeconfigurator/img/bg768.jpg')!important;
background-repeat:no-repeat!important;
-moz-background-size:cover!important;
-o-background-size:cover!important;
background-size:fixed!important;
background-position:center!important;
background-attachment:fixed!important;
}
}
/* 1680 ----------- */
#media (min-width : 1640px) and (max-width : 1800px){
body {
background-image:url('http://evoxity.net/modules/themeconfigurator/img/bg1050.jpg')!important;
background-repeat:no-repeat!important;
-moz-background-size:cover!important;
-o-background-size:cover!important;
background-size:fixed!important;
background-position:center!important;
background-attachment:fixed!important;
}
}
/* 1920 ----------- */
#media and screen (min-width : 1800px){
body {
background-image:url('http://evoxity.net/modules/themeconfigurator/img/bg1200.jpg')!important;
background-repeat:no-repeat!important;
-moz-background-size:cover!important;
-o-background-size:cover!important;
background-size:fixed!important;
background-position:center!important;
background-attachment:fixed!important;
}
}
the 1920 is working perfectly and if i for example drag my windows bar to one of the sites it automaticly get rescaled and keeps the middle container on the background matching with the resize of the website.
I tried it with the 1680 res and a website called "Screenfly" but there the container stuck in the middle so i thought it still uses the 1920 res since changes to bg1050.jpg didnt change anything.
Than i jumped to 1366 because i got a notebook with that resolution but the result was the same. Any suggestions how to get the other devices to work as the 1920x1080 and 1920x1200 resolution?
You are using !important tags because it cannot override the previous query. To solve that you must use media queries in descending order according to screen size. For example:
#media screen and (max-width:900px){
//some code here
}
#media screen and (max-width:768px){
//some code here (Codes you write in here will override the codes from the previous media query which is 900px without using !important tags)
}
By doing that you can get rid of !important tags. You should also use proper media queries like this.
One example of proper media query structure: #media screen and (max-width:1080px)
For bootstrap, there are existing width cutoffs built into the classes themselves (e.g. col-xs-3, col-sm-8, col-md-10, col-lg-1). These classes are already preset to cutoff at 768m 992, and 1024px.
If you define your own cutoff points via media queries, how do you ensure the preset classes like col-xs-3 are indeed cutting off at the cutoffs you specified via media queries like so?
#media only screen and (min-width: 300px) and (max-width: 600px) {
//your code stuff
}
#media only screen and (min-width:600px) and (max-width: 900px) {
//your code stuff
}
#media only screen and (min-width: 900px) {
//your code stuff
}
How do you get these cutoff points defined in media queries to actually correspond to col-xs, sm md lg, etc? Or is there a better way of going about this?
These values (break points) are set by the $screen-sm-min, $screen-md-min and $screen-lg-min variables in Bootstrap's variables.less file.
When changing your break point you also have to change the container widths.
I suggest you use the following formula to do that:
$container-*: floor( ( $screen-* - $grid-gutter-width ) / $grid-columns ) * $grid-columns + $grid-gutter-width;
See also: https://github.com/twbs/bootstrap/issues/15623#issuecomment-96294396
And finally you should possible also take the into account. Which has been declared in the variables.less file too, as follows:
//** Point at which the navbar becomes uncollapsed.
$grid-float-breakpoint: $screen-sm-min !default;
How do you do a custom build using rails gems?
See also https://github.com/twbs/bootstrap-sass#a-ruby-on-rails:
In your Gemfile you need to add the bootstrap-sass gem, and ensure that the >sass-rails gem is present - it is added to new Rails applications by default.
And then: Import Bootstrap styles in app/assets/stylesheets/application.scss:
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
#import "bootstrap-sprockets";
$screen-sm-min: 300px;
$container-sm: floor( ( $screen-sm - $grid-gutter-width ) / $grid-columns ) * $grid-columns + $grid-gutter-width;
$screen-md-min: 600px;
$container-md: floor( ( $screen-md - $grid-gutter-width ) / $grid-columns ) * $grid-columns + $grid-gutter-width;
$screen-lg-min: 900px;
$container-lg: floor( ( $screen-lg - $grid-gutter-width ) / $grid-columns ) * $grid-columns + $grid-gutter-width;
#import "bootstrap";
Bootstrap's code has been build with a mobile first approach. The xs grid is the default and does not require any media query at all. Then the sm grid follows for screen width larger than $screen-sm-min and so on. You do not have to set a max-width media query.