CSS Width vs Viewport
When we are using "width" with media queries it is important to set the meta tag correctly. Basic meta tag looks like this and it needs to be put inside the <head> tag.
<meta name="viewport" content="width=device-width,initial-scale=1">
Why this is important?
View-port is the width of the device itself. If your screen resolution says the resolution is 1280 x 720, your view-port width is "1280px".
More often many devices allocate different pixel amount to display one pixel. For an example iPhone 6 Plus has 1242 x 2208 resolution. But the actual viewport-width and viewport-height is 414 x 736. That means 3 pixels are used to create 1 pixel. But if you did not set the meta tag correctly it will try to show your webpage with its native resolution which results in a zoomed out view (smaller texts and images).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.
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: 300px) and (max-width: 767px) {
.site-title {
font-size: 80%;
}
}
Styles in this block are only applied if the screen size is over 1024px wide.
@media only screen and (min-width: 1024px) {
.site-title {
font-size: 120%;
}
}
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: 768px) and (max-width: 1023px) {
.site-title {
font-size: 90%;
}
}