CSS: Media Query (Responsive Design)

, , …,
Want to master JavaScript in a month? Commit. Buy Xah JavaScript Tutorial. You also get Xah HTML Tutorial and Xah CSS Tutorial.

You can use CSS “Media Query” to set what CSS to use depending on user's window size.

Example:

/* current viewport width is ≥ 1024 px */
@media screen and (min-width: 1024px) {
    body {margin-right:220px;}
    aside#id1 {display:initial;width:201px;}
}

/* current viewport width is ≤ 1023 px */
@media screen and (max-width: 1023px) {
    body {margin-right:10px;}
    aside#id1 {display:none;width:10px;}
}

Example:

/* current viewport width w is 1000 ≤ w ≤ 1500 px */
@media screen and (min-width: 1000px) and (max-width: 1500px) {
 body {background-color:cyan}
}

Reference https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

blog comments powered by Disqus