Complete Guide to "Media Query in CSS" For Beginner

In this video i will talk about Media Query in CSS

Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).

Syntax
A media query is composed of an optional media type and any number of media feature expressions. Multiple queries can be combined in various ways by using logical operators. Media queries are case-insensitive.

A media query computes to true when the media type (if specified) matches the device on which a document is being displayed and all media feature expressions compute as true. Queries involving unknown media types are always false.

Example:

@media screen and (max-width: 1000px) {

   #content { width: 100% }

}

#css 

What is GEEK

Buddha Community

Complete Guide to "Media Query in CSS" For Beginner

Complete Guide to "Media Query in CSS" For Beginner

In this video i will talk about Media Query in CSS

Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).

Syntax
A media query is composed of an optional media type and any number of media feature expressions. Multiple queries can be combined in various ways by using logical operators. Media queries are case-insensitive.

A media query computes to true when the media type (if specified) matches the device on which a document is being displayed and all media feature expressions compute as true. Queries involving unknown media types are always false.

Example:

@media screen and (max-width: 1000px) {

   #content { width: 100% }

}

#css 

Daniel  Hughes

Daniel Hughes

1630702800

CSS Tutorial in Hindi - Media Query in CSS

Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).

#css 

Media Query in CSS Full Tutorial | Responsive Layout HTML CSS

 

in this video tutorial you will learn Media Query in CSS step by step with practically and also you will learn Responsive Layout in HTML and CSS3.

media query is very important and helpful to manage the site layout on different devices, when you will increase and decrease the browser site, then your site don't display perfectly on the web.

So, when you will manage the site with different layout, you need to use media query to manage the screen size layout and display the site on different devices perfectly.

Furthermore, during this time have bunch of new features in CSS3 such as units em, rem, vh and also vw units. You must be know all about it. inside the tutorial you will also learn usage of Units step by step.

I've made complete tutorial for everyone they are interested in HTML and CSS3. Inside the tutorial have a complete usage of media query and also have units usage.

Once you learn How to use media query and also units, then you will learn How to use media Query in CSS3 to make a responsive website.

So, hope this tutorial are helpful and beneficial for you.