- Media Query
- CSS Breakpoints
- Min-width
- Max-width
- Combining both
- When to use which: min-width or max-width
Media Query
Media queries were introduced in CSS version 3 which lets its users create responsive websites through the use of the @media rule. This rule requires you to state the media type such as print, screen, speech, or all along with some logical expressions that specify certain media features such width, resolution, density, etc.
These queries basically allow the alteration of the web layout depending upon the device type such as desktop, laptop, mobile, etc. Here we have shown you how to define a media query.
Syntax
@rule
media type
media feature
media feature
operator
operator
A media query always starts with the @media rule and requires you to specify the media type on which the query is to be applied. Then you need to state the screen media type and use operators like ‘and’ to combine media features such as min-width, or max-width.
Media queries are specified at certain points which are referred to as media query breakpoints. See the upcoming section to learn them in detail.
CSS Breakpoints
Breakpoints in CSS are referred to as those points on which the structure of a website changes corresponding to the screen size of the device type. Breakpoints are decided either based on the device type or the content type. Some common breakpoints are as follows.
- For mobile devices: 320px to 480px
- For tablets and ipads: 481px to 768px
- For laptops: 769px to 1024px
- For desktops: 1025px to 1200px
While reading the explanations above you must have noticed that we have used two media features min-width and max-width. You must be wondering what are these and when to use them. Below we have given you all the essential details.
Min-width
The min-width media feature specifies the minimum width of a specific device. For instance, in the above section, we have enlisted some screen widths on the basis of the device type such as the minimum screen width of mobile devices is 320px.
Example
p {
font-size: 16px;
}
}
In the above code, we have specified that when the minimum screen width is 600px or wider then the font-size of the paragraph will change to 16px. So any device with this screen width will display the paragraph text in the specified font size.
Max-width
The max-width media feature states the maximum width of a particular device. For instance, the maximum screen width of mobile devices is 480px. Consult the example below to understand it in a better way.
Example
p {
font-size: 25px;
}
}
The code above states that when the maximum screen width is 700px or lesser then the font-size of the paragraph will alter to 25px. Any device rendering this screen width will display the paragraph text in the specified font size.
Combining both
You can also use both of the media features together by combining them with the ‘and’ operator.
Example
font-style:bold;
}
@media screen and (min-width: 600px) and (max-width:700px) {
p {
font-style: italic;
}
}
The above code specifies that if the screen width lies between 600px to 700px then the font style will be italic otherwise the font style will be bold.
When to use which: min-width or max-width
If you are designing your website for smaller devices first then set your default CSS breakpoints with min-width and adjust for larger devices accordingly.
Meanwhile, if you are designing for larger devices first then use max-width and then tune for smaller devices accordingly.
Conclusion
The min-width and max-width are media features that correspond to a certain media type that has been specified in the media query. The min-width specifies the minimum screen width of a specific device, meanwhile, The max-width media feature states the maximum screen width of a specific device. If you are designing your website for smaller devices first then set your initial breakpoints with min-width, whereas, if you are designing for larger devices first then use max-width. This post discusses min-width, and max-width media features in detail along with relevant examples.
