So this is a tricky question I know. I've faced the issues with sprites and high contrast mode, basically it can be solved with code as follows:
.icon:before {
content: url(icons.png);
position:relative;
left:-2px;
top:-109px;
}
.icon {
width:17px;
height:18px;
display:inline-block;
overflow:hidden;
}
That's nice. It does work. However, if I change the content url for retina, the image will be much much bigger and hence, it will fail.
Is there anyway to have the best of both worlds?
If you want to display your image the same way as non retina images, you need to set up the width of your image.
Here a some examples:
Here is an example with min-width (responsive design)
Desktop css:
.site-header {
position: relative;
background: url('assets/images/XXXX.jpg') 0px 0px no-repeat;
height: 155px;
background-size: cover;
background-position:center;
}
Retina on responsive design
#media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 768px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 768px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 768px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 768px),
only screen and ( min-resolution: 192dpi) and (min-width: 768px),
only screen and ( min-resolution: 2dppx) and (min-width: 768px) {
.site-header
{
position: relative;
background: url('assets/images/GBBO_BG_1536_R.jpg') 0px 0px no-repeat;
height: 148px;
background-size:cover;
}
/* Iphone P */
#header #logo_home {
width: 154px;
height: 102px;
background: url('assets/images/GBBO_logo_1536_R.png') 0px 0px no-repeat;
background-size: 100% auto;
}
}
To remove the responsive effect, remove the "and (min-width: 768px)"
Related
I have 3 open intervals of screen width now. They are (0,600], (600,800) and [800,1000] and each has a diffferent css style. For example:
#media screen and (max-width: 600px) {
background: #000
}
#media screen and (min-width: 800px) and (max-width: 1000px){
background: #eee
}
But how should I express (600,800) with ccs media query ?
#media screen and (max-width: 600px) {
background: #000
}
#media screen and (min-width: 800px) and (max-width: 1000px){
background: #eee
}
#media screen and (min-width: 600px) and (max-width: 800px){
background: #fff
}
You can use 3rd media query.
Start with a default value, which is the value of the mobile first. Then modify the values from a minimum with and up:
HTML:
CSS:
.bg {
width: 100vw;
height: 100vh;
background-color: #000;
}
#media screen and (min-width: 600px){
.bg {
background-color: steelblue
}
}
#media screen and (min-width: 800px){
.bg {
background-color: tomato
}
}
#media screen and (min-width: 1000px){
.bg {
background-color: #2c3e50;
}
}
#media (max-width: 1000px) {
background: #eee;
}
#media (max-width: 800px) {
background: #fff;
}
#media (max-width: 600px) {
background: #000;
}
This order will execute based on screen size and CSS will be applied accordingly.
You can define these interval for media queries link below:
#media screen and (min-width: 801px) and (max-width: 1000px){
background: #eee
}
#media screen and (min-width: 601px) and (max-width:800px){
background: #cccccc
}
#media screen and (max-width: 600px) {
background: #000
}
Now
The first media query will work from 0px to 600px
The second one will work 601px from to 800px
And the Third one will work from 801px to 1000px
Good morning,
I have created a media query for my website. I have the feeling that it is slowing down my website, because it is not optimized.
On mobile phones, I have a specific image. For tablets and desktops I have another image to be shown.
The media query I have works just fine. But it is not optimized.
Can anyone help me to get it optimized?
this is the query:
body, html {
height : 100%;
width: 100%;
margin:0;
}
#media only screen and (min-width: 320px) {
.Frontpage-image {
background-image: url("https://dit.be/wp-content/uploads/2021/01/mobiel-01.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 100vh;
}
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
.Frontpage-image {
background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height:100vh;
}
}
#media screen and (min-width: 768px) {
.Frontpage-image{
background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 100vh;
}
}
#media screen and (min-width: 1025px) {
.Frontpage-image {
background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height:100vh;
}
}
Please use this CSS code.
In media query, styles defined outside of query is inherited.
So my code works exactly like yours, but the code has been greatly reduced.
body, html {
height : 100%;
width: 100%;
margin:0;
}
.Frontpage-image {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 100vh;
}
#media only screen and (min-width: 320px) {
.Frontpage-image {
background-image: url("https://dit.be/wp-content/uploads/2021/01/mobiel-01.svg");
}
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
.Frontpage-image {
background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
}
}
#media screen and (min-width: 768px) {
.Frontpage-image{
background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
}
}
#media screen and (min-width: 1025px) {
.Frontpage-image {
background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
}
}
You can check this answer.
Here are some tips to optimize this
Use Low size images
Use Low size videos or embed them from YouTube or Vimeo
Compress this CSS code.
I'm currently building a small website including RWD features to enable it to work well on mobile devices.
My media queries seem to work correctly in portrait mode. However, when I rotate the devices the rules don't seem to apply any more.
Portrait Mode (320x480)
Using the code:
#media only screen and (min-width: 320px) and (max-width: 480px)
The same media query renders this in
Landscape Mode (480x320)
As you can probably make out, my media queries adjust the font size depending on the width of the screen. Strangely, the font in the Landscape view does not change even though the media query applies to it too.
The full code of the media queries:
/*................................
MEDIA QUERIES - Phones
..................................*/
#media only screen and (min-width: 320px) and (max-width: 480px) {
/*............................
FONTS
..............................*/
html {
font-size: 70%;
}
p.promo {
line-height: 1.4em;
}
}
/*..............................
LAYOUT
................................*/
.clientLogo {
float: left;
height: 60px;
width: 60px;
margin: 10px 10px 10px 30px;
background: $moondust;
}
/* Phones - Landscape */
/*................................
MEDIA QUERIES - Tablets
..................................*/
#media only screen and (min-width: 481px) and (max-width: 768px) {
/*............................
FONTS
..............................*/
html {
font-size: 85%;
}
p.promo {
line-height: 1.5em;
}
/*.............................
LAYOUT
...............................*/
.clientLogo {
float: left;
height: 80px;
width: 80px;
margin: 10px 30px 10px 30px;
background: $moondust;
}
}
/*................................
MEDIA QUERIES - Desktops
..................................*/
#media only screen and (min-width: 769px) {
/*............................
FONTS
..............................*/
html {
font-size: 100%;
}
/*...............................
LAYOUT
.................................*/
.clientLogo {
float: left;
height: 120px;
width: 120px;
margin: 10px 30px 10px 30px;
background: $moondust;
}
}
Have you tried this?
#media (min-width: 480px) and (orientation: landscape) { ... }
Here's the style.css where I've implement media queries:
body {
background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
background-repeat: no-repeat;
background-position:bottom left, bottom right;
}
/* Large desktop */
#media (min-width: 1200px)
body {
background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
background-repeat: no-repeat;
background-position:bottom left, bottom right;
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px)
body {
background: #b5ebf9 !important;
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px)
body {
background: #b5ebf9 !important;
}
/* Landscape phones and down */
#media (max-width: 480px)
body {
background: #b5ebf9 !important;
}
And I've added this in the HTML, for it to detect (I think this is right):
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
And obviously, linked to the above CSS file in the header.
But for some reason, the background image ALWAYS displays, instead of the colour #b5ebf9.
What am I doing wrong?! I've spent 1-2 days on and off trying to fix this! I tried...
Making separate CSS sheets for each device , linking to those style sheets with the media tag included (no reaction whatsoever)
Also tried removing the first body query from the above CSS - which just keeps the backgrounds in that color, across all devices, no background image at all! (I want the background image to show up on desktop screens.)
Please help!
You need those {} to regroup media queries:
body {
background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
background-repeat: no-repeat;
background-position:bottom left, bottom right;
}
/* Large desktop */
#media (min-width: 1200px){
body {
background: url("http://voxie.co.uk/assets/img/infr/bgartL.png"), url("http://voxie.co.uk/assets/img/infr/bgart.png");
background-repeat: no-repeat;
background-position:bottom left, bottom right;
}
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) {
body {
background: #b5ebf9 !important;
}
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px){
body {
background: #b5ebf9 !important;
}
}
/* Landscape phones and down */
#media (max-width: 480px){
body {
background: #b5ebf9 !important;
}
}
Can you try this:
#media only screen and (max-width: 979px) and (min-width:768px) {}
#media only screen and (max-width: 767px) and (min-width:481px) {}
instead of just #meadia
I have a problem loading retina images.
I have got two imagesprites. One normal and one retina.
The problem is that I don't know how to scale down the retina image, it is now twice the size.
This is my css.
.home {
background: url('../images/buttonSprite.png') -49px -52px;
width: 43px;
height: 43px;
}
#media all and (-webkit-min-device-pixel-ratio: 2) {
.home {
background: url('../images/buttonSprite#2x.png') no-repeat -79px -113px !important;
-webkit-background-size:43px 43px;
}
}
How to solve this problem?
Try just this:
.home {
background: url('http://img580.imageshack.us/img580/9284/buttonsprite.png') no-repeat -49px -53px;
width: 43px;
height: 43px;
}
#media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-moz-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3/2), all and (min-device-pixel-ratio: 1.5) {
.home {
background: url('http://img90.imageshack.us/img90/5624/buttonsprite2x.png') no-repeat -39px -56px;
background-size: 200px 496px;
}
}
Notice that I used a pixel-ratio of 1.5, that's pretty much a standard. I also included the other prefixes.