Understanding Responsive Design with CSS

                                

@media only screen and (min-width: 600px) {
    /* Apply these styles if the screen width is 600px or more */
}

                              

                                

@media only screen and (max-width: 480px) and (min-resolution: 300dpi) {
    /* Apply these styles if the screen width is 480px or less and resolution is 300dpi or more */
}

                              

                                

/* If the screen width is 480px or less (like on a mobile phone), set the body font size to 12px and make the photo element's width 100% */
@media only screen and (max-width: 480px) {
  body {
    font-size: 12px;
  }
  #photo {
    width: 100%;
  }
}

                              

                                

@media only screen and (min-width: 480px) and (max-width: 600px) {
    /* Apply these styles if the screen width is between 480px and 600px */
}

                              

                                

/* This style will apply if the screen width is between 480px and 600px */
@media only screen and (min-width: 480px) and (max-width: 600px) {
  .nav-container {
    font-size: 15px;
  }
}

                              

                                

.news-row {
  height: 20em; /* Relative to the font size of the .news-row element */
  width: 30em;
}
.news-row .news-column {
  height: 80%; /* 80% of the height of .news-row */
  width: 50%; /* 50% of the width of .news-row */
}

                              

                                

html {
  font-size: 18px;
}
span {
  font-size: 2rem; /* 2 times the root font size */
}

                              

                                

.container {
  background-image: url('background.jpg');
  background-size: cover; /* Makes sure the image covers the entire container */
}

                              

                                

html {
  font-size: 16px;
}
.container {
  width: 20rem; /* 20 times the root font size */
}