Check out example codes for "@media css". It will help you in understanding the concepts better.

Code Example 1


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  
  .selector {
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {    

Code Example 2

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;


Code Example 3

CSS @media Rule

Change the background color of the <body> element to "lightblue" when the browser window is 600px wide or less:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;


Code Example 4

  Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) 

/* Small devices (portrait tablets and large phones, 600px and up) 
@media only screen and (min-width: 600px) {...} 

/* Medium devices (landscape tablets, 768px and up) */

  @media only screen and (min-width: 768px) {...} 

/* Large devices (laptops/desktops, 992px and up) 

  @media only screen and (min-width: 992px) {...} 

/* Extra large devices (large 
  laptops and desktops, 
  1200px and up) */
@media only screen and (min-width: 1200px) {...}

Code Example 5

  p {
    font-size: 20px;

  /* Only change code below this line */
@media(max-height: 800px) {
  /* Only change code above this line */

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>

Code Example 6

@media (max-width: 989px) and (min-width: 768px) {}

Learn ReactJs, React Native from