Media Query

       No comments

 




What is a Media Query?

  • Media query is used to make the webpage capable of the device.
  • Mainly it is used to make responsive web designs.
  • With media queries, we can set the different styles based on the different screen sizes.

Media Query Syntax

@media screen and (min-width: 480px) {
    body {
      background-color: lightgreen;
    }
  }

  • In the given syntax example we have set the min-width and max-width to add style on the given screen size.
  • CSS selector is used to select the HTML element and we will write our CSS properties in { }

Media Query Screen Sizes

  • Phone: 600px
  • Tablet: 768px
  • Laptop: 992px
  • Large: 1200px

Related Posts:

  • CSS Margin CSS MarginsMargins are used to create space around elements, outside of any defined bordersWith CSS, you have full control over the margins. The… Read More
  • CSS Height, Width and Max-widthThe CSS height and width properties are used to set the height and width of an element.The CSS max-width property is used to set the maximum width of … Read More
  • CSS BordersBorder property helps in creating borders around the textCSS border properties allow you to specify the style, width, and color of an element's border… Read More
  • CSS Padding CSS works on a box model structure, where elements are packed according to the sequence of the imageThe padding property defines the space betwe… Read More
  • CSS Box Model  In CSS, the term "box model" is used when talking about design and layout.The CSS box model is essentially a box that wraps around every H… Read More

0 Comments:

Post a Comment

Do leave your comments