CSS media queries

 


 The Media query in CSS is used to create a responsive web design. The breakpoint specifies for what device-width size, the content is just starting to break or deform.



 Media queries can be used to check many things:

  • width and height of the viewport
  • width and height of the device
  • Orientation
  • Resolution
  Media Types in CSS: There are many types of media types which are listed below:
  
  • all: It is used for all media devices
  • print: It is used for printers.
  • screen: It is used for computer screens, smartphones, etc.
  • speech: It is used for screen readers that read the screen aloud.
 Features of Media query: There are many features of media query which are listed below:
  • color: The number of bits per color component for the output device.
  • grid: Checks whether the device is grid or bitmap.
  • height: The viewport height.
  • aspect ratio: The ratio between the width and height of the viewport.
  • color-index: The number of colors the device can display.
  • max-resolution: The maximum resolution of the device using dpi and dpcm.
  • monochrome: The number of bits per color on a monochrome device.
  • scan: The scanning of output devices.
  • update: How quickly can the output device modify.
  • width: The viewport width.



















Comments