How To Write Media Queries In CSS
Last Updated : Mar 11, 2024
IN - CSS Media Queries | Written & Updated By - Ashish
In this tutorial we will show you the solution of how to write media queries in CSS, the CSS Media Query allows you to apply CSS only when the browser and device environment meet a set of criteria, such as "viewport is wider than 480 pixels."
Because media queries allow you to generate alternative layouts depending on the size of the viewport, they are an important aspect of responsive web design.
They can, however, be used to identify other features of the environment in which your site runs, such as whether the user is using a touchscreen rather than a mouse. In this tutorial, we shall see how to write media queries in CSS.
Step By Step Guide On How To Write Media Queries In CSS :-
The most common feature we detect in order to construct responsive designs (and that has universal browser support) is viewport width, and we can use the min-width, max-width, and width media properties to apply CSS if the viewport is above or below a particular width — or an exact width.
These options are used to make layouts that adapt to various screen sizes.
The following code will provide you with a better understanding of using media queries in CSS.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
@media screen and (width: 600px) {
body {
color: red;
}
}
</style>
</head>
<body>
</body>
</html>
- To begin, type <! DOCTYPE html> to indicate that the file is in HTML format to the web browser.
- The < html> element, on the other hand, is used to indicate that HTML content is about to begin
- The information about web pages is now contained in the < head> tag. This tag uses the <title> element to provide a web page title. The < head> and <title> tags are a nice example of paired tags. As a result, both have the closing tags < /head> and </title>.
- We used the internal method of adding the <style> tag to the <head> element of the HTML file and creating the media query within the <style> tag's parameters.
- CSS styling (specifically, a red background colour) is only applied in the above example on device screens with a width of 600px or less—basically, smartphones. The CSS styling in the media query above will only apply to print and speech if the "only" keyword is replaced with "not."
- A general media query declaration, on the other hand, applies to all three media types by default, so you only need to specify one if you want to exclude one or more.
- The < body> element is used to specify a webpage's content. All of the content for the website will be written here.
- To close the <body> and <html> tags, use the < /body> and </html> tags, accordingly.
Conclusion :-
Using media queries to develop responsive designs is a great way to go. You can modify your website differently for users surfing on mobile devices or tablets using media queries without affecting the page's content.
Follow the above steps to write media queries in CSS. In case you have a problem is using a media queries, leave a comment below I hope this tutorial on how to write media queries in CSS helps you.
About Ashish
