Media Query CSS For All Devices With Example -

  • width and height of the viewport
  • width and height of the device
  • orientation of the device whether the device is in landscape mode or portrait mode.
  • resolution of the device
  • all:- Used for all devices
  • print:- Used for printers
  • screen:- Used for computer screens, laptops, smartphones, etc.
  • speech:- Used for screenreaders that “read” the page out loud
@media not|only mediatype and (expressions) { CSS-Code; }
<!DOCTYPE html> 
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
background-color: lightgreen;
}
@media screen and (min-width: 480px)
{
body
{
background-color: blue;
}
}
</style>
</head>
<body>
<h1 style="color: white;">Resize the browser window to see how the color changes!</h1>
<p style="color: white;">The background color will change according to the mediatype .i.e. screen and the viewport is more than 480px .</p>
</body>
</html>

--

--

Hi, This is Biplab and I am web developer well versed in PHP and other open source technologies. I am here to share my experience with the community.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bipsmedium

Bipsmedium

Hi, This is Biplab and I am web developer well versed in PHP and other open source technologies. I am here to share my experience with the community.