Media Query

 




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 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
  • CSS Font CSS FontFont properties are used to add different styles to the fonts.Font properties are used to change the style, size, weight, etc. of the fo… Read More
  • CSS Outline CSS OutlineAn outline is a line drawn outside the element's border.CSS has the following outline properties:outline-styleoutline-coloroutline-wi… 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
  • Text PropertyCSS Text ColorThe color property is used to set the color of the text.The color is specified by:a color name - like "red"a HEX value - like "#ff0000"a… Read More

0 Comments:

Post a Comment

Do leave your comments