Media Query implementation on web page

DLithe_BC_NFS_T_Task12_MediaQueries

03/02/2022

Task Details:

Implement Media queries in your existing website.

What is media query ?

Media queries is a feature of CSS 3 allowing content rendering to adapt to different conditions such as screen resolution. It became a W3C recommended standard in June 2012, and is a cornerstone technology of responsive web design.

CSS3 Introduced Media Queries

Media queries in CSS3 extended the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device.

Media queries can be used to check many things, such as:

• width and height of the viewport
• width and height of the device
• orientation (is the tablet/phone in landscape or portrait mode?)
• resolution

Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).

output code:

As per the media query background color it has change.

Github:

https://github.com/deepaksmishra/DLithe_Bootcamp_DeepakMishra/blob/main/media.html