CSS Media Queries Using Media Queries to Target Different Screen Sizes
Example
Often times, responsive web design involves media queries, which are CSS blocks that are only executed if a condition is satisfied. This is useful for responsive web design because you can use media queries to specify different CSS styles for the mobile version of your website versus the desktop version.
@media only screen and (min-width: 300px) and (max-width: 767px) {
.site-title {
font-size: 80%;
}
/* Styles in this block are only applied if the screen size is atleast 300px wide, but no more than 767px */
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
.site-title {
font-size: 90%;
}
/* Styles in this block are only applied if the screen size is atleast 768px wide, but no more than 1023px */
}
@media only screen and (min-width: 1024px) {
.site-title {
font-size: 120%;
}
/* Styles in this block are only applied if the screen size is over 1024px wide. */
}
