Media Queries

Media queries are a key concept in responsive web design that allow you to apply different styles based on the screen size of the device. They enable you to create customized layouts and designs that adapt to the available space.

Media queries are written using CSS and use the @media rule. They consist of a media type and one or more expressions that evaluate to true or false, determining whether the specified styles should be applied.

For example, let's say that you want to make the text larger on mobile devices. You can use a media query to target screens with a maximum width of 767 pixels and increase the font size accordingly.

Here's an example of a media query in CSS:

1class {
2  property: value;
3}
4
5@media screen and (max-width: 767px) {
6  class {
7    property: new-value;
8  }
9}

xxxxxxxxxx

const screenSize = window.innerWidth;

if (screenSize < 768) {

  console.log('You are using a small device.');

} else if (screenSize < 1024) {

  console.log('You are using a medium device.');

} else {

  console.log('You are using a large device.');

}