Curious about Media Queries? Welcome to responsive design 101.
I remember walking into my web development class as a transfer student and seeing my professor refreshing the classes’ memory on Media Queries, and I was LOST. I was so panicked as I had been a transfer student and hadn’t made it this far into web design and after the first lecture my head was spinning.
But media queries don’t have to be intimidating. They actually make a lot of sense. Sometimes you just need to learn by doing and I think the best way is to make a project.
The project I chose to work on while practicing media queries is a simple Weather App. The main focus of this project for me was making it responsive. I first had to really understand the following questions to be able to fully understand media queries.
What is Responsive Design?
Responsive web design is designing for multiple devices so that your web site or web application can scale appropriately for the device it’s being accessed on.
But how do we adjust for each screen?
The answer is media queries.
Media queries can be used to conditionally apply styles with CSS using the @import or the @media rules.
A media query is composed of an optional @media type and any number of media expressions.
Media Types
- all (suitable for all devices)
- print (intended for documents and pages that are meant to be viewed on a screen in a print preview mode)
- screen (intended for screens)
- speech (intended for speech synthesizers)
Media Features
Media features describe specific characteristics for any user agent (software, browser, or bot accessing the web), output device, or environment. They are entirely optional and if used must be surrounded by parenthesis. You can follow the media Features link above to see more about these characteristics.
Logical Operators
You can also use the logical operators and, not, and only to compose a media query. The and is used to string multiple media features together. It is also used to add media types. Each media feature needs to return true in order for the code contained to run.
Let’ look at a few examples of media types are put together.
// A single media type
@media print {...}// Combining multiple media types
@media screen, print {...}
Now that the syntax for how to use media types is clear, understanding how to add media features is the next step.
// using media features@media print (hover: hover) {...}@media screen (max-width: 1240px) {...}
But what about more complex media features? How do you put together multiple types or features for edge cases? The answer is using the logical operators to string together multiple media features.
// Examples of complex media features@media screen and (min-width: 30em) and (orientation: landscape) { ... }@media (min-height: 680px), screen and (orientation: portrait) { ... }
Final Thoughts
This is just a taste of what SCSS really has to offer. In fact SCSS can handle logical comparisons, functions, computation, and a few other useful features that can really come in handy when trying to create highly scaleable code. I think the best way to really explore these concepts is to build a project with the intention of making it responsive. You may not get the full breadth of the true power of SCSS because it’s usually more obvious in enormous code basis, but you can start to practice and understand what’s out there.
If you’d like to view the project I made exploring these concepts, please follow the links below:
Sarah Mendez is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. The following article relates to Web Development in the DGM2740 Course and is representative of the skills learned.
