Media Queries
You may apply conditions to your CSS using media queries. Depending on a device's capabilities, you instruct the browser to add or delete particular CSS rules. We must reorganize our layout as the screen size changes. As the screen size shrinks, it would typically be organized vertically.
The syntax for a media query looks like this:
@media <media-type> and (expressions) {
CSS code;
}
- @media notifies the browser that a media query is being launched.
- The category of devices to which we will apply our guidelines is defined by media-type. For instance, we might insert a media-type "screen" here. This input is not required. If we don't utilize it, all devices will be subject to the regulations.
- The width or orientation of the device might be (expression).
- We may define certain CSS rules that should be implemented inside the media query.
Here is an real-life example of Media Query:
@media (max-width: 500px) {
.Projects .Container .img
width: 80%;
padding-right: 20%
}
The optional media-type was not used in this case. Instead, we have the phrase max-width: 500px (our breaking point), which instructs the browser to only apply the restrictions in our media query to devices with screens that are 500px wide or less. We have our standard CSS code within our media query, along with values of your choosing.