Media Queries

Jeffery Davis CIT 230

@media Rule

• @ media is used to define different style rules for different media types and devices.

• Media queries are used to check the capability and attributes of a device. Medias queries can check many things including:

1. Height and width of a browser2. Height and width of a device3. Check orientation of a device (landscape or portrait.4. Resolution

How to use media queries HTML/CSS

HTMLMake separate CSS files for each media querie. Usually you do one for each size of device you would like the elements of the site to adjust to. In this I will just do one size for mobile devices. In my site Jefferytdavis.com I have section of my site where I show my portfolio. I have two rows of 4 boxes each. Each have a defined width of 25%. I want to make it so when someone is using their phone my website will change so each box is 100% width instead of 25%. First, Add this to your html file in between the head tags of your site.

<link rel = “stylesheet” media= “screen and (min-width:600px)” href = “small.css”>

CSSFirst thing you need to do is define the @media minimum or maximum width. This will make sure that the css changes made will only happen when the screen is the size that is defined.

@media (min-width: 600px) {<!– Put in css that you want changed in between these curly braces. -->

.box {width:100%;

}}Every time that the screen changes to have a min-width of 600px the porfolio pictures with take up 100% of the screen.

Before and after add media queries

Before After

Drastic Examples of Media QueriesDesktop Mobile Portrait

I built this site for someone wanting a way for people to fill out divorce documents all online. The media queries in this site adjust a lot of different things. To mention a few it changes the menu to the 3 bars you can click which makes it very user friendly. It also removes the description in the slider to make it more readable.

Conclusion

Media queries are essential in making a website 100% responsive. Responsive means that a site adjusts to make it more user friendly no matter what device they may be using. With the web becoming more and mobile first media queries are extremely important to successfully creating a successful modern day website.