Introduction to CSS media queries
Hello friends, this blog is all about CSS3 media queries. We assume that you know at least the basic knowledge of CSS3 and have heard about media query. Though we will explain them following.
What is media query
Media query is a rule which actually includes a chunk of css codes which only work if certain condition is true, i.e. for the responsiveness of website pages we use media queries.
For example if we want to show all H1 element's color in red for all screen above 1200px as well as blue for all screens above 768px and green for all screens below 767px, in that case we will go for media queries.
Meta tag
Meta tag is essential for media queries, so please add the following line in the head section of html page. If we do not add the meta tag, media queries would not work at all.
<meta name="viewport" content="width=device-width, initial-scale=1">
It means that all the browsers will render the width of the html page at the width of its own screen. Suppose our screen is 360px wide, the browser window will be of 360px wide, rather than the actual window width of large screen say 1200px.
Media Query
For a quick note:
- Large devices (lg) -> 1200px above (e.g. Laptops, Large computers)
- Medium devices (md) -> between 992px to 1199px (e.g. Small desktops, Notebooks)
- Smalll devices (sm) -> between 991px to 768px (e.g. Tablets, Ipads)
- Extra small devices (xs) -> below 767px (e.g. Smartphones)
/* for the screen resolutions above 1920px */
@media screen and (min-width: 1920px) {
/* css properties will be here */
}
/* for the screen resolutions between 1200px and 1600px */
@media screen and (max-width: 1600px) and (min-width: 1200px) {
/* css properties will be here */
}
/* for the screen resolutions between 1199px and 992px */
@media screen and (max-width: 1199px) and (min-width: 992px) {
/* css properties will be here */
}
/* for the screen resolutions below 767px */
@media screen and (max-width: 767px) {
/* css properties will be here */
}
/* for the screens with orientation in portrait mode */
@media only screen and (orientation: portrait) {
/* css properties will be here */
}
/* for the screens with orientation in landscape mode */
@media only screen and (orientation: landscape) {
/* css properties will be here */
}
For iPads
/* for the screens of iPad in portrait mode */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* css properties will be here */
}
/* for the screens of iPad in landscape mode */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* css properties will be here */
}
/* for the screens of iPad 3 & 4 with retina display */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
/* css properties will be here */
}
/* for the screens of iPad 3 & 4 with retina display in portrait mode */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {
/* css properties will be here */
}
/* for the screens of iPad 1 & 2 with retina display */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1){
/* css properties will be here */
}
/* for the screens of iPad 1 & 2 with retina display in landscape mode */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {
/* css properties will be here */
}
For iPhones
/* for the screens of iPhone X with retina display */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3) {
/* css properties will be here */
}
/* for the screens of iPhone 6, 7 & 8 */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
/* css properties will be here */
}
/* for the screens of iPhone 8 plus */
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) {
/* css properties will be here */
}
/* for the screens of iPhone 5 & 5S */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* css properties will be here */
}
/* for the screens of iPhone 2G, 3G, 4 & 4S */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* css properties will be here */
}
These are the basic media queries, are often used for responsive. We need to know the basic knowledge about them and use them according to their tricks and rules. Please go through them carefully and do not forget to share. Thanks.
Post a Comment