CSS Media Queries Example
Making CSS style in different devices or different screen sizes.
Making your website look good on any screen sizes/device will greatly impact how your visitors behave.
When browsing on your phone and you visited a page and thw words are so large that you need to scroll horizontally.
At best you only want your page to scroll vertically on any device, i mean even in PC i dont want to scroll horizontally.
Visitors also tend to leave when the page is not even readable on their phone. It might be due to the words are too smal or to big to read and any other reason that makes the page not even worth reading.
In this post I will be showing you how you can control the page style on different sizes using CSS.
Quick Explanation
Using the @media we can tell the current page how it would look.
@media [mediatype] and ( [expressions] ) {
// your rule for this size
}
- mediatype [Optional] - Tells what kind of type should the style will be applied.
Most commonly used are all (will be applied on any types), screen (for colored devices such as PC) and print (only when printing the page, try to press ctrl + p on your browser).
- expressions [Required] - a rule on which the style would only be applied.
There are a lot of expressions but mostly used are max-width:value and min-width:value for detecting the width of the current view and max-height:value and min-height:value for detecting the height.
expressions can also be combined by using a logical operator (only,and & or)
For example,
// When width is less than 768px and height is less than 540px;
@media ( max-width: 768px ) and ( max-height: 540px ) {
body{
background: red;
}
}
Example CSS
In this example we will just discard mediatype's since we want it to be on anything, even when printing.
We will only make a change when the width of the device is different.
There are a lot of devices out in the market with different sizes so we will just get the most commonly breakpoint's used.
// default
body{
background:pink;
}
// When width is less than 768px;
@media ( max-width: 768px ) {
body{
background: red;
}
}
// When width is less than 640px;
@media ( max-width: 640px ) {
body{
background: blue;
}
}
// When width is less than 480px;
@media ( max-width: 480px ) {
body{
background: black;
}
}
// When width is less than 320px;
@media ( max-width: 320px ) {
body{
background: yellow;
}
}
If the page is on a large screen width is greated than 768px then it would background to pink, less than 768px width then it would be red, less than 640px width then it would be blue and less than 320 width then it would be yellow
Now for example you wanted to "print" the page but with a different background.
Then you could add this below the default body rule
// default
body{
background:pink;
}
// will only work when printing
@media print {
body{
background:orange;
}
}
......
Tips:
- Ordering the rules is crucial, since CSS will take the last applicable rule and will apply it on the element.
For example we are viewing the page on a mobile phone and the phone width is 450px,
// When width is less than 480px;
@media ( max-width: 480px ) {
body{
font-size:20px;
}
}
// When width is less than 768px;
// (This will be applied because 450 is less than 768)
@media ( max-width: 768px ) {
body{
font-size:14px;
}
}
Then the 768px rule here will be applied since 450 is less than 768 in our last rule.
Replies (0)
Reply