What we did

October 2020 A Complete guide to Media Queries on the CSS Trick site .

This month we had a look at media queries, I found an article “Complete Guide to Media Queries” which we went through. Did you know that you can use media queries in javascript?

Media queries are a way to change the look and position of items in a web site to suit the size and resolution of a device. As an example, you can use a query to take a menu and display it horizontal on a wide screen and vertical on a small screen. To quota “Media queries are a way to target browser by certain characteristics, features, and user preferences, then apply styles or run other code based on those things.”

Basically a media query looks at one or more media types, All, Screen, Speech, and Print. It then defines a feature to look for eg min width. We then add an operator or condition that will set a action to be taken. There are three operators and, or and not. Here is a basic example

@media screen (min-width: 320px) and (max-width: 768px)

This is where we get creative. Using an @ rule we now change the css instructions to change the appearance as needed.

.element {    /* Styles! */  }

As an example if our css instruction for our menu is flex { display: flex; flex-direction: row;}

We can then change that to read flex { flex-direction: column;} if the screen size gets is between 768 and 320px.

@media screen (min-width: 320px) and (max-width: 768px)

{

 flex

               { flex-direction: column;}

}

Here’s a link to the article and its companion article showing examples of media types for various devices.

Steve South
Web Design leader