CSS3 Media query for all devices

03 Nov, 2021
The media query in CSS is used to create a responsive web design to make a user-friendly website. It means that the view of web pages differs from system to system based on screen or media types. Media is allowing us to reshape and design the user view page of the website for specific devices like Tablets, Desktops, Mobile phones, etc.
Media queries can be used to check many things like the following
Width and height of the viewport
Width and height of the device
Orientation
Resolution
A media query consist of a media type that can contain one or more expression which can be either true or false. The result of the query is true if the specified media matches the type of device where the document is displayed on. If the media query is true then the style is applied. In simple words, it uses the @media rule to add the block of CSS properties, based on certain conditions.
Syntax:
@media not | only mediatype and (expression)
{
    // Code content
}
We can add the breakpoint to see the screen-width along with the width and height of the viewport for the different devices. A breakpoint is a point or key that determines when to change the layout by reshaping & adding the new rules inside the media queries. There are some common breakpoints, not a standard resolution, that can be used for the different widths & heights of devices:
For Mobile devices: 320px-480px
For Tablets or iPad: 480px - 768px
For Laptop or small-size screen: 768px -1024px
For Desktop or large-size screen: 1024px -1200px
For Extra-large size device: 1200px and more
These breakpoints can help to build responsive designs(ie., Mobile-first design) by specifying the different sets of values for width & height. We can also use the media queries for changing the layout of a webpage that will be depending on the orientation of the browser.
Example: This example illustrates the use of the CSS Media query to build the mobile-first design by specifying the different device-width.
HTML
<!DOCTYPE html><html> <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <title>GeeksforGeeks CSS Media Query</title>    <meta name="description"          content="CSS Media Query for all devices                       like mobile, tablet, desktop etc.">    <meta name="viewport" content="width=device-width,                                   initial-scale=1">    <link rel="stylesheet" href="gfg-style.css"></head> <body>    <div class="gfg-div">GeeksforGeeks</div></body> </html>
CSS Code: The following CSS code specifies the media queries with different styling properties based on certain conditions that will be displayed according to the device size.
CSS
* {  margin: 0;  padding: 0;} /* Default Design */.gfg-div {   /* To make all elements center */  display: flex;  justify-content: center;  align-items: center;   /* Default Styling */  margin: 20px auto;  padding: 30px;  font-size: 30px;  width: 300px;  height: 300px;  background-color: darkseagreen;  color: black;} /* For Desktop View */@media screen and (min-width: 1024px) {  .gfg-div {    background-color: #63c971;    color: #fff;  }} /* For Tablet View */@media screen and (min-device-width: 768px)and (max-device-width: 1024px) {  .gfg-div {    width: 400px;    height: 400px;    background-color: orange;    color: black;  }} /* For Mobile Portrait View */@media screen and (max-device-width: 480px)and (orientation: portrait) {  .gfg-div {    width: 200px;    height: 200px;    background-color: red;    color: #fff;  }} /* For Mobile Landscape View */@media screen and (max-device-width: 640px)and (orientation: landscape) {  .gfg-div {    width: 400px;    height: 200px;    background-color: cyan;    color: black;  }} /* For Mobile Phones Portrait or Landscape View */@media screen and (max-device-width: 640px) {  .gfg-div {    width: 400px;    height: 200px;    background-color: chartreuse;    color: black;  }} /* For iPhone 4 Portrait or Landscape View */@media screen and (min-device-width: 320px)and (-webkit-min-device-pixel-ratio: 2) {  .gfg-div {    width: 400px;    height: 400px;    background-color: brown;    color: black;  }} /* For iPhone 5 Portrait or Landscape View */@media (device-height: 568px) and (device-width: 320px)and (-webkit-min-device-pixel-ratio: 2) {  .gfg-div {    width: 400px;    height: 400px;    background-color: cornflowerblue;    color: black;  }} /* For iPhone 6 and 6 plus Portrait or Landscape View */@media (min-device-height: 667px) and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 3) {  .gfg-div {    width: 400px;    height: 400px;    background-color: darkgoldenrod;    color: black;  }}
Output:
Supported Browsers:
Google Chrome
Firefox
Microsoft Edge
Internet Explorer
Opera
Safari
surindertarika1234
bhaskargeeksforgeeks
CSS-Advanced
CSS-Properties
CSS-Questions
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.