CSS Media Query & Responsive Design
90% of traffic on the web comes from mobile. That’s why the designed websites should have a responsive design suitable for mobile use, and the CSS media query structure plays a big role in this regard.
Media query structure is used to show the content on large screens appropriately on the small screen or to prevent the page content from overflowing and scrolling in different screen sizes. While coding websites, they are optimized with responsive CSS codes according to different mobile screen sizes.
With media query, CSS codes can be applied to HTML elements at specific screen widths.
For example, while the <p> tags are 17 pixels in a page, the font size of the <p> tag can be set to 14 pixels in order to maintain the ratio on screens below 600 pixels.
Min-width Media Query
When min-width is used, CSS codes written under the media query are valid for the specified pixel value.
As in the example below, the font size of the p tag is specified as 17 pixels, up to a maximum of 751 pixels.
@media (min-width: 751px) {
p {
font-size: 17px;
}
}Max-width Media Query
When max-width is used, the CSS codes written below the media query are valid for less than the specified pixel value.
As in the example below, the font size of the p tag is specified as 14 pixels, up to a maximum of 750 pixels.
@media (max-width: 750px) {
p {
font-size: 14px;
}
}Orientation: Landscape
Orientation: In landscape use, CSS codes written under the media query are valid when mobile devices are placed in horizontal position.
In the example below, the CSS code that will change the color of the box when the mobile device is horizontal is specified.
Vertical
Horizontal
div {
height: 100px;
width: 100px;
background-color: bisque;
}
@media (orientation: landscape) {
div {
background-color: brown;
}
}Orientation: Portrait
Orientation: In portrait usage, CSS codes written under the media query are valid when mobile devices are in vertical position.
Vertical
Horizontal
h1 {
font-weight: 100;
}
@media (orientation: portrait) {
h1 {
font-weight: bold;
}
}Legacy Browsers Compatibility
The only concept used in the media query prevents the execution of invalid media queries in older browsers. It does not have any effect in new browsers.
@media only screen and (max-width: 750px) {...}Media Query & Viewport
In order for the media query structure to work, the viewport meta tag must be added to the <head></head> tag in the source code of the page.
<meta name="viewport" content="width=device-width, initial-scale=1">
Source:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries