I'd like to know what happens when I lay my code structure as shown below. Does an iPad user load "stripes.png" and then "stripes-X2.png" this way?
div.stripes {
background: url("stripes.png");
}
#media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
div.stripes {
background: url("stripes-X2.png");
}
}
If that's the case, would this be a better alternative to make sure each device only loads appropriate version of the image for itself?
#media (-webkit-min-device-pixel-ratio: 1), (max-resolution: 191dpi) {
div.stripes {
background: url("stripes.png");
}
}
#media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
div.stripes {
background: url("stripes-X2.png");
}
}
Related
#media only screen and (min-width:300px) and (max-width:667px) and (orientation: portrait) {Class goes here}
#media only screen and (min-width:667px) and (max-width:768px) and (orientation: landscape) {class goes here}
portrait view working good but landscape not showing any change even media query can't see in inspect code also.
I actually tested the ranges:
#media only screen and (min-width:300px) and (max-width:667px) {
div {
background-color: red;
}
}
#media only screen and (min-width:667px) and (max-width:768px) {
div {
background-color: green;
}
}
They do work. But when I add the orientation, it fails to work on the portrait.
#media only screen and (min-width:300px) and (max-width:667px) and (orientation: portrait) {
div {
background-color: red;
}
}
#media only screen and (min-width:667px) and (max-width:768px) and (orientation: landscape) {
div {
background-color: green;
}
}
Try to remove one of the orientation on the media queries. It could solve the problem. If you still want to leave the orientation condition, test it on a real device instead of a simulating tool.
With Screaming Frog SEO tool is it possible using XPath or Regex to extract the background image URL from a div.
My desired result would be to extract the full URL of the /rdesktop.jpg image.
What is the Xpath or Regex I should use?
Here's the code I'm looking at.
<div _ngcontent-sc91="" class="grv-col--sm-4"><style id="c1-background-image-64435ff0-4abd">#c1-background-image-64435ff0-4abd + * {
background-image: url('https://ecm.example.com/WCM/learn-grow/card/lgc272-update/tablet.jpg');
}
#media only screen and ( min-resolution: 2dppx) {
#c1-background-image-64435ff0-4abd + * {
background-image: url('https://ecm.example.com/WCM/learn-grow/card/lgc272-update/rdesktop.jpg');
}
}
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
#c1-background-image-64435ff0-4abd + * {
background-image: url('https://ecm.example.com/WCM/learn-grow/card/lgc272-update/rdesktop.jpg');
}
}
#media only screen and (min-width: 600px) {
#c1-background-image-64435ff0-4abd + * {
background-image: url('https://ecm.example.com/WCM/learn-grow/card/lgc272-update/tablet.jpg');
}
}
#media only screen and (min-width: 600px) and ( min-resolution: 2dppx) {
#c1-background-image-64435ff0-4abd + * {
background-image: url('https://ecm.example.com/WCM/learn-grow/card/lgc272-update/rtablet.jpg');
}
}
#media only screen and (min-width: 700px) and (-webkit-min-device-pixel-ratio: 2) {
#c1-background-image-64435ff0-4abd + * {
background-image: url('https://ecm.example.com/WCM/learn-grow/card/lgc272-update/rtablet.jpg');
}
}
#media only screen and (min-width: 1024px) {
#c1-background-image-64435ff0-4abd + * {
background-image: url('https://ecm.example.com/WCM/learn-grow/card/lgc272-update/desktop.jpg');
}
}
</style><div _ngcontent-sc91="" sharedc1backgroundimage="" class="image ng-star-inserted"></div><!----></div>
I haven't been able to find a way to do this. Any help would be much appreciated.
When I write media queries I always specify both the min and max so that I don't override the CSS for a background image when the device is at a certain size, instead it just loads the one I want.
So:
#media (max-width: 767px) { background-image: url(''); }
#media (min-width: 768px) { background-image: url(''); }
instead of:
background-image: url('');
#media (min-width: 768px) { background-image: url(''); }
Note: I use SCSS so the above nested syntax is valid.
However when it comes to retina...
How do I do the same pattern? So instead of overriding the image like:
background-image: url('');
#media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { background-image: url(''); }
I want do something more like:
#media (-webkit-max-device-pixel-ratio: 2), (max-resolution: 2dppx) { background-image: url(''); }
#media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { background-image: url(''); }
But what do I set the max one to? as usually you just go one pixel below your min to prevent the double breakpoint issue. What would the resolution need to be? 1.9dppx and 1.9 ratio?
Update: it looks like you don't need to do the same as pixels to prevent double breakpoint for the resolution and it works as is.
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 */
I have a pattern as background - for regular resolutions as well as for retina. If i handle it that way
body {
background: image-url('ttg.png') repeat top left;
#media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (-moz-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
background: image-url('ttg#2X.png') repeat top left;
background-size: 476px 476px;
}
}
or that way
body {
background: image-url('ttg.png') repeat top left;
#media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
background: image-url('ttg#2X.png') repeat top left;
background-size: 476px 476px;
}
}
Each time Chrome is throwing the following recommendation at me:
Consider using ‘dppx’ units instead of ‘dpi’, as in CSS ‘dpi’ means
dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond
to the actual ‘dpi’ of a screen. In media query expression:
(-webkit-min-device-pixel-ratio: 1.5), not all, (min-resolution:
144dpi)
So what is the correct way to call those two backgrounds? Best regards Ralf