CSS: Media Query (Responsive Design)

, , …,
Want to master JavaScript in a week? Example based, to the point. Xah JavaScript 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