media_queries_ex

media_queries.css

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

div {
    width: 400px;
    height: 400px;
    border: 1px dashed green;
}

div p {
    font-size: 1em;
    color: #000;
}

/* tablets and mobile phones */
@media (max-width: 768px) {
  div {
    background-color: darkgoldenrod;
  }
  
  div p {
    font-size: 2em;
    color: #fff;
  }
}

/*And operator*/
/*@media (min-width: 700px) and (orientation: landscape) { ... }*/

/*Only*/
/*<link rel="stylesheet" media="only screen and (color)" href="example.css" />*/