Comprehensive CSS Basics For Beginners:summary 02

1. Mobile Media Query

If you want to scope your css to mobile phone, you will certainly use media queries. Like so

@media all and (max-width: 500px) {
body {
background: blue
}
}

Basically, this is telling the browser to make the body blue for all the type of screens with screen whose width is less or equal to 500px.

Since all is always default, you can refactor your code to look like this.

@media (max-width:500px) {
body {
color :blue
}
}

2. Print Media Query

Sometimes you want to style your page to look different when printed. That is where print media query comes in. This is how we do it.

@media print {
 body {
color: blue
}
}

3. Landscape Orientation

Sometimes when you are watching a video on your phone you tend to tilt your phone on landscape position. The question is how do you make your site respond to such as change like video do. This is how you will give a little punch to your keyboard

@media(orientation:landscape) {
body {
background:blue;
width:100%;
color:white;
}
}

4. Portrait Orientation

This orientation is the default but on the event that you want to explicitly define its style then first sip a cup of coffee and then do this.

@media(orientation:portrait) {
.subtitle {
color:green
}
}

5. Combining Landscape Orientation and Width

@media (orientation:landscape) and (max-width: 500px) {
.title {
 bacground:red
}
}

You must have notice we are using the and to tell the browser to implement the style if both condition are true.

6. Landscape and Width using or.

If you want to add styles when one of the condition is true and not both like we did in and, then this is what you need to do.

@media (orientation:landscape), (max-width: 500px) {
.title {
color:green;
}
}

7. Min Width

Okay, we have dwell so much on max width , we can still do the same for min width too. Like so

@media (orientation:landscape) and (min-width:992px) {
 body {
color:red;
}
}