HTML is really an amazing language used in all around the world for creating beautiful and stunning websites. One who wants to build their career in web design and development should have sound knowledge of HTML so that they can go for advanced level web courses. Now, with the arrival of HTML5, responsive websites are started designing too. This has increased the popularity of HTML5 among the web designers in the industry. But how we can create a responsive website in HTML that can be accessed on different devices. Well, this is possible with Media query on which we are going to discuss in this blog.
An Insight to Media Query in HTML & CSS
Media Query is a CSS 3 feature to change the properties of the content of the screen according to a device such as a screen resolution, viewport width etc.
Use of Media Query in HTML & CSS
- The most commonly used media feature is width and height. CSS media query is a W3C recommendation and it uses CSS rules to adopt different conditions.
- Most commonly CSS media query is used when we use mobile screen instead of a computer screen.
- It uses @media rule in our CSS to include certain CSS properties only when a certain condition is holding true. We include media query with help of HTML and CSS to make a responsive web design which provides flexibility to the contents of the website and enhance the webpage for viewing in different devices like Desktop, smartphone, tablet etc.
How to use Media Query?
To use a media query, we should have an idea about the resolution of different devices
- Mobile:320px
- Tablet:780px
- Desktop:1600px
We can use a media query in the head tag of our HTML code by using style tag or we use it in our external CSS.
Syntax for HTML:
<head>
<style>
body{background-color:red;}
@media screen (min-width:450px){background-color:orange;}
</style>
</head>
This code changes the colour of the background from red to orange when we use device resolution of the width greater than 450px.
Syntax for CSS media query:
@media <media-type> and (expression/media feature){ CSS properties}
For ex: @media screen and (max-width:1500px){width:100%; height:auto}
Here screen refers to the screen of the device like mobile, tablet, desktop.
Using CSS of a media query, we can change font size, margin, padding, colour
width, animation etc.
Basically, we can change the style of header, navigation, and footer according to the media type of the device. We can also add and remove elements of the website according to different devices and for our convenience.
For ex: @media screen and (max-width:800px)
{
footer p{display:none;}
}
This is how we can use media query in HTML & CSS. You can explore more about media query from online resources or by joining Web Development Institute (an education partner of ADMEC ). which offers in-depth training on every aspect of web designing and development.
Author Section: I Akash Jain successfully completed HTML5 CSS3 Master Course from ADMEC. This blog is the part of my practical project. Hope it would be helpful for you.
No comments:
Post a Comment