Scribd
Upload
26 views

CSS3 Media Query For All Devices

The document discusses CSS3 media queries, which allow adjusting webpage styling based on screen size or device type. Media queries can check viewport width and height, device width and height, orientation, and resolution. Common breakpoints are provided for mobile, tablet, laptop, desktop, and extra-large screens. An example uses media queries to style a <div> element differently on desktop, tablet, and mobile portrait and landscape views. Styles are adjusted for properties like width, height, background color, and text color based on viewport dimensions.

Uploaded by

Luis Bardullas
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
26 views

CSS3 Media Query For All Devices

The document discusses CSS3 media queries, which allow adjusting webpage styling based on screen size or device type. Media queries can check viewport width and height, device width and height, orientation, and resolution. Common breakpoints are provided for mobile, tablet, laptop, desktop, and extra-large screens. An example uses media queries to style a <div> element differently on desktop, tablet, and mobile portrait and landscape views. Styles are adjusted for properties like width, height, background color, and text color based on viewport dimensions.

Uploaded by

Luis Bardullas
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

CSS3 Media query for all devices - GeeksforGeeks https://www.geeksforgeeks.org/css3-media-query-for-all...

HTML CSS JavaScript jQuery PHP Bootstrap NodeJS ReactJS AngularJS ExpressJS

CSS3 Media query for all devices


Difficulty Level : Easy ● Last Updated : 03 Nov, 2021

Read Discuss Courses Practice Video

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:
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge
that you have read and understood our Cookie Policy & Privacy Policy

Got It !
▲ HIDE AD

1 de 9 24/01/23, 05:22
CSS3 Media query for all devices - GeeksforGeeks https://www.geeksforgeeks.org/css3-media-query-for-all...

@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.
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge
that you have read and understood our Cookie Policy & Privacy Policy
Example: This example illustrates the use of the CSS Media query to
Got It !
build the mobile-first design by specifying
▲ the different device-width. HIDE AD

2 de 9 24/01/23, 05:22
CSS3 Media query for all devices - GeeksforGeeks https://www.geeksforgeeks.org/css3-media-query-for-all...

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 {
  cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge
We use
  /* To make that all elements
you have centerour*/
read and understood Cookie Policy & Privacy Policy
  display: flex; Got It !
  justify-content: center; ▲ HIDE AD

3 de 9 24/01/23, 05:22
CSS3 Media query for all devices - GeeksforGeeks https://www.geeksforgeeks.org/css3-media-query-for-all...

  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;
  }
}
  cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge
We use
/* For Mobile Landscape
that you have read andView */ our Cookie Policy & Privacy Policy
understood
@media screen and (max-device-width: 640px)
Got It !
and (orientation: landscape) { ▲ HIDE AD

4 de 9 24/01/23, 05:22
CSS3 Media query for all devices - GeeksforGeeks https://www.geeksforgeeks.org/css3-media-query-for-all...

  .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
We use cookies to(min-device-height: 667px)
ensure you have the best browsing and
experience (min-device-width:
on our 375px)
website. By using our site, you acknowledge
and (-webkit-min-device-pixel-ratio: 3)Policy
that you have read and understood our Cookie { & Privacy Policy
  .gfg-div {
Got It !
    width: 400px; ▲ HIDE AD

5 de 9 24/01/23, 05:22
CSS3 Media query for all devices - GeeksforGeeks https://www.geeksforgeeks.org/css3-media-query-for-all...

    height: 400px;
    background-color: darkgoldenrod;
    color: black;
  }
}

Output:

Supported Browsers:

• Google Chrome
• Firefox
• Microsoft Edge
• Internet Explorer
• Opera
• Safari

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge
that you have read and understood our Cookie Policy & Privacy Policy

Got It !
▲ HIDE AD

6 de 9 24/01/23, 05:22
CSS3 Media query for all devices - GeeksforGeeks https://www.geeksforgeeks.org/css3-media-query-for-all...

Like 9

Next

Bootstrap Grid System

Related Articles

1. How to use Sass Variables with CSS3 Media Queries ?

2. Explain all the measurement units in CSS3

3. Advantage of CSS3 over CSS

4. How to Create Animated Background using CSS3 ?

5. How to Create a Curve Text using CSS3/Canvas ?

6. How to Create Link Tooltip Using CSS3 and jQuery ?

7. How to make bubble background using HTML5 and CSS3?

8. Difference between CSS and CSS3

9. Fading Text Animation Effect Using CSS3

10. How to transform background image using CSS3 ?

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge
that you have read and understood our Cookie Policy & Privacy Policy

Got It !
Article Contributed By : ▲ HIDE AD

7 de 9 24/01/23, 05:22
CSS3 Media query for all devices - GeeksforGeeks https://www.geeksforgeeks.org/css3-media-query-for-all...

SohelRaja
@SohelRaja

Vote for di�culty


Current di�culty : Easy

Easy Normal Medium Hard Expert

Improved By : surindertarika1234, bhaskargeeksforgeeks

Article Tags : CSS-Advanced, CSS-Properties, CSS-Questions, CSS,


HTML, Web Technologies

Practice Tags : HTML

Improve Article Report Issue

A-143, 9th Floor, Sovereign Corporate Tower,


Sector-136, Noida, Uttar Pradesh - 201305

[email protected]

Company Learn

About Us DSA
We use cookies to ensure you have the best browsing experience on our website. By using
Careers our site, you acknowledge
Algorithms
that you have read and understood our Cookie Policy & Privacy Policy
In Media Data Structures
Got It !
Contact Us ▲ SDE Cheat Sheet HIDE AD

8 de 9 24/01/23, 05:22
CSS3 Media query for all devices - GeeksforGeeks https://www.geeksforgeeks.org/css3-media-query-for-all...

Privacy Policy Machine learning

Copyright Policy CS Subjects

Advertise with us Video Tutorials

Courses

News Languages
Top News
Python
Technology
Java
Work & Career
CPP
Business
Golang
Finance
C#
Lifestyle
SQL
Knowledge
Kotlin

Web Development Contribute

Web Tutorials Write an Article

Django Tutorial Improve an Article

HTML Pick Topics to Write

JavaScript Write Interview Experience

Bootstrap Internships

ReactJS Video Internship

NodeJS

@geeksforgeeks , Some rights reserved

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge
that you have read and understood our Cookie Policy & Privacy Policy

Got It !
▲ HIDE AD

9 de 9 24/01/23, 05:22

You might also like