What is @media ? Responsive?

Do you wonder how a web page is changing it's a style and look on different screen size. It is done by using the @media rule that used in CSS to change the style and looks of two web pages.

Using the @media rule we can set you different styles for different devices. See the following program here I set two different width for three different screens namely desktop/laptop, tablet and smartphone.

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
/* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

Most of the websites use this responsive design to attract their visitors and making visitors comparitable to use the website. We actually using or setting different screens by using the min width and max width properties. This are not actually properties this were actually rules that make the webpage to look in different styles.Responsiveness play an important role in the creation of the website. When we create a webpage, we make it sutable for different devices. The result of the above code is shown below.




This is the most common responsive design used by famous sites like W3Schools,javatpoint,tutorialspoint,geeksforgeeks etc. Why don't you try this out. It's too late so so try to code it now.