Media Queries CSS3 Essential Training

Media Queries CSS3 Essential Training


Media Queries CSS3 Essential Training

Welcome to another fun and very effective lesson on CSS3 Essentials. In our last lesson we’ve seen the basics of the text shadows effects. In this Media Queries CSS3 Essential Training lesson we’ve gonna see the one of the important section which is mainly used in the responsive view of our web pages.
The Bootstrap which is a very famous css framework is works on this media queries. It is used to display the contents of our page depends on the screen size of your device. It is called as the mobile first framework is gives more importance to the screen responsive.
Here we have a simple code for the basic html page and we can see how to make it responsive.

The above shown is the html page code for the general view without the responsive, and the following is the css we have used for the page

For the above css and html page here is the result,
Media Queries CSS3 Essential Training
In the above example there are two columns at the normal desktop view. Then if we wants to view the same page in mobile or tablet devices, the two columns is looking so awkward. So we can show it as a single column and align it in center of the page.
In this situation we can move on to the media queries. The Media queries are very useful when the web pages are accessed on the go devices. Now a days the mobile devices are accessing then the desktop devices. So we have to prepare and maintain the repeating cutomers by update the content for their comforts.
Here you can see how to write the media queries for our pages.

In Media Queries CSS3 Essential Training the above is an media query example, here the @media is a keyword and in some cases we use the screen followed by the media keyword but it is an optional. And then the max-width: 767px is mentions consider the upcoming style effects for all the devices which are having the screen resolution upto 767px.
Consider the following example without the media query when we drag for the mobile screen resolution.
Media Queries CSS3 Essential Training
This is looking so irritating to read the contents so we make the above css code with the Media Query, and here is the output for that media query.
Media Queries CSS3 Essential Training
Mobile Device in MOzilla – Media Queries CSS3 Essential Training
Almost all the web developers are need to check their working projects are responsive or not. For that we can’t but all the devices with various screen resolution. A Major browser makers Mozilla comes with an handy device view in their product called Firefox.
In firefox web browser we can instantly getting an mobile device view by Ctrl + Shift + M  , which can changes our browser to the mobile mode. In that view you can click and drag to view the page in various screen sizes.

In Media Queries CSS3 Essential Training, if you wants change the effect for each of the device we can write a separate media queries for each of them.
We hope this lesson will gives you an basic idea about the media queries css3 essential training. We can learn a lot more about the media queries in the upcoming future lessons.

Leave a Reply