Some example media queries.

mediaqueries.html

<ul>
  <li data-email="[email protected]">Jim</li>
  <li data-email="[email protected]">Julie</li>
  <li data-email="[email protected]">Jay</li>
  <li data-email="[email protected]">Jennie</li>
</ul>  

script.js

//none

style.css

@media screen and (min-width: 1100px) {
  body {
    background: darkorange;
  }
  ul li:after {
    content: " (" attr(data-email) ")";  
  }
}
@media screen and (max-width: 1099px) and (min-width: 820px) {
  body {
    background: cornflowerblue;
  }
}
@media screen and (max-width: 819px) and (min-width: 600px) {
  body {
    background: khaki;
  }
  ul li {
    list-style: none;
    margin: 0;
  }
}
@media screen and (max-width: 599px) {
  body {
    background: palegoldenrod;
  }
  ul li {
    list-style: none;
    display: inline;
  }
  ul li:after {
    content: ", ";
  }
  ul li:last-child:after {
    content: none;
  }
}