How To Use Media Query 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 use media query in CSS, Media queries can change a website or app's appearance (and possibly functionality) based on a matched set of conditions about the user's device, browser, or system settings, media queries can change a website or app's appearance (and possibly functionality).
It's most typically used in responsive design, which instructs browsers to adjust the display of website items when the screen size exceeds or falls below a set limit.
In this post, we'll dive into the concept of CSS media queries, which is a CSS feature that can make changes to a web page based on the device.
Step By Step Guide On How To Use Media Query In CSS :-
Media queries come in handy when you wish to customize your website or app based on a device's overall kind (such as print vs. screen) or certain features and qualities (such as screen resolution or browser viewport width).
The following are examples of media queries:
- @media and @import at-rules can be used to conditionally apply different styles.
- With the media= attribute, you can target certain media for the <style>, <link>, <source>, and other HTML components.
- To use the Window to test and monitor media conditions.
The following is an example of using media query in CSS
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
/*Used for the design of smartphones*/
@media(max-width: 500px){
body{
background-color: red;
}
}
</style>
</head>
<body>
</body>
</html>
- To begin, type <! DOCTYPE html> tells the web browser that the file is in HTML format.
- The <html> element, on the other hand, is used to signal the start of HTML content.
- The < head> tag now contains the information about web pages. The <title> element is used in this tag to provide a web page title. A good example of paired tags is the <head> and <title> tags. As a result, both have the </head> and </title> closing tags.
- We utilised the internal way of adding the < style> tag to the HTML file's <head> element and creating the media query within the <style> tag's parameters.
- The above example only applies CSS styling (particularly, a red background colour) on device screens with a width of 500px or less—basically, smartphones. If you replace the "only" keyword with "not," the CSS styling in the media query above will only apply to print and speech.
- If the viewport is exactly 500 pixels wide, then only it will use the following media query to change the colour of the background-color to red.
- A general media query declaration, on the other hand, applies to all three media types by default, so there's no need to declare one unless you want to omit one or more of them.
- The <body> element is used to define the content of a webpage. This is where all of the stuff for the website will be written.
- The </body> and </html> tags are used to close the <body> and< html> tags, respectively.
Conclusion :-
You can now recognise and use media queries in CSS and HTML files. One place where you can truly start using CSS in your day-to-day work is with Media Queries.
It's worth noting that browsers that support media queries also support a variety of other CSS properties, so your stylesheets for these devices can employ additional CSS properties to produce a slick effect when viewed on mobile device.
Follow the above steps to use media query in CSS I hope this tutorial on how to use media query in CSS helps you.
About Ashish
