Optimizing css for a media query - css

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.

Related

How Can I use two differents CSS backgrounds in Angular?

I would like to change the background based on a boolean.
If I have two backgrounds in CSS:
.background {
background-image: url('../assets/images/Background.png');
background-repeat: no-repeat;
background-size: contain;
#media screen and (max-width: 1280px) {
}
background-size: 100% 670px;
#media screen and (min-width: 1920px) {
background-size: 100% 800px;
}
#media screen and (min-width: 2560px) {
background-size: 100% 1200px;
}
}
.performance-background {
background-image: url('../assets/images/Background-performance.png');
background-repeat: no-repeat;
background-size: contain;
#media screen and (max-width: 1280px) {
}
background-size: 100% 335px;
#media screen and (min-width: 1920px) {
background-size: 100% 325px;
}
#media screen and (min-width: 2560px) {
background-size: 100% 325px;
}
}
I would like to use something similar to:
[ngClass]="{ 'background': displayBackground, 'performance-background': displayPerformanceBackground}"
Thank you so much.
You can add different classes depending of a boolean state using angular ngClass and a ternary operator in a HTML tag
example:
HTML:
<div [ngClass]="boolean ? 'trueClass' : 'falseClass'"> Example Text</div>
"boolean" is a variable and if it is set to true the html tag will use "trueClass" class, else "falseClass"
CSS:
.trueClass{
background: red
}
.falseClass{
background:blue
}

Why media queries don't work for mobile corectly?

У меня есть следующий код
.bg-if-premium {
background-image: url(photo_2021-05-22_20-40-40.jpg);
background-size: 100% 100% !important;
background-position: fixed;
background-attachment: fixed;
}
.bg-if-free {
background-image: url(photo_2021-04-16_16-43-00.jpg);
background-size: 100% 100%;
background-position: fixed;
background-attachment: fixed;
}
#media (max-width: 767px) {
.bg-if-premium .bg-if-free {
background-image: none;
}
}
#media (max-width: 480px) {
.bg-if-premium .bg-if-free {
background-image: none;
}
}
But on a mobile device, the background is still present. How to solve the problem?
#media screen and (max-width: 767px) {
.bg-if-premium,
.bg-if-free {
background-image: none;
}
}
#media screen and (max-width: 480px) {
.bg-if-premium,
.bg-if-free {
background-image: none;
}
}
Include the #media screen and (desired width) and like Mordred stated, separate the class identifiers by a comma.
Also since it looks like your working from a website first approach, you shouldn't have to include both of these screen queries. The first one will do the trick.

Mobile Media Queries for retina

I have a little problem with media query for retina images.
I have this block.less:
.page-header {
background: #bg-dark url("../images/bg-back-mobile.jpg") no-repeat center top;
#media #retina {
background-image: url("../images/bg-back-mobile#2x.jpg");
background-size: 700px auto;
}
}
#media #tablet-width {
.page-header {
background-image: url("../images/bg-back-tablet#1x.jpg");
#media #retina {
background-image: url("../images/bg-back-tablet#2x.jpg");
background-size: 1200px auto;
}
}
}
#media #desktop-width {
.page-header {
background-image: url("../images/bg-back-desktop.jpg");
}
}
and vars.less:
#tablet-width: ~"(min-width: 700px)";
#desktop-width: ~"(min-width: 1200px)";
#retina: ~"(min-resolution: 144dpi), (min-resolution: 1.5dppx)";
When I'm testing this background-image on mobile device (width: 320px, DPR: 2.0), there is downoading url("../images/bg-back-tablet#2x.jpg") but not url("../images/bg-back-mobile#2x.jpg").
When I delete this part
#media #retina {
background-image: url("../images/bg-back-tablet#2x.jpg");
background-size: 1200px auto;
}
it's working right.
What's wrong?

CSS media query (#media function)

I have a wordpress site. I am facing issues with custom media css code. When I try to save the code it vanishes and doesn't reflect on the site. Any help would be greatly appreciated. Following is the code I am trying to add:
#media only screen and (max-width: 719px)
.site-title {
display: none;
}
#media only screen and (max-width: 719px)
#nav-header.nav-container {
background-image: URL(http://i2.wp.com/vedsutra.com/wp-content/uploads/2016/07/cropped-VedSutra_logo.png);
background-repeat: no-repeat;
background-position: center;
}
You should wrap your query in {} like the following example:
#media only screen and (max-width: 719px) {
.site-title {
display: none;
}
#nav-header.nav-container {
background-image: URL(http://i2.wp.com/vedsutra.com/wp-content/uploads/2016/07/cropped-VedSutra_logo.png);
background-repeat: no-repeat;
background-position: center;
}
}

Retina sprites and high contrast mode

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)"

Resources