Media Queries– Introduction
A media query is a line of code that allows your website to display a certain way on a device. The device could be mobile phone, laptop, printer, projector and more. This is done by using CSS (Cascading Style Sheets). The CSS on your website determines how it will look on different devices. Most templates for websites include this markup (code) already and additional coding might not be required.
How do I write media Queries?
Writing media queries can be difficult if you do not know how to write CSS. In this article the basics of creating a simple query will be covered below.
These are the basics of writing a media query for a website that is created without using a CMS (Content Management System). These are examples that a regular media query would include.
CSS (Cascading Style Sheets)
The term CSS stands for “Cascading Style Sheets”. What you need understand is what “cascading” means. Cascading means that the website will load the code from top to bottom. Anything after it that changes part of the code will most of the time take precedence. There are of course exceptions to this rule but I will not go over that right now.
Lets Begin writing your first Media Queries
The first step is to figure out what aspects of your website need to be adjusted to fit a certain screen size.
Another thing to consider is that you might be using a plugin that is not optimized for different devices, this may result a more challenging media query.
In this post I am going to cover how to write basic queries for simple HTML and CSS based website. This guide will assume that you already know how to write basic HTML and CSS.
Writing the Query
- You start by finding the element of what you want to write the query for. In your code select an element you want to target. For example: the body. Then use that to focus it in the code.
- Start your code using:
@media only
If you are writing this for a desktop or mobile device the you would write:
@media only screen and - To target the resolution, you will use the width of your screen in pixels. You will write:
@media only screen and (max-width: 600px)
Max-width means that you are targeting anything larger than the pixel width you selected. - After you write:
@media only screen and (max-width: 600px)
Add a curly bracket to start out your code.
@media only screen and (max-width: 600px) { - Target the element you want to change, for example: body.
@media only screen and (max-width: 600px) {body: {width: 600px;}}
Don’t forget to use double curly brackets to close your queries as that is used to open and close the code.
Adding the Query to your Website
Adding the query to your website will depend on what CMS (Content Management System) you are using. The example that I am going to describe is if you have a website you wrote using HTML, CSS or PHP. At the bottom of your CSS file, copy paste the query that you wrote above and save your code. As a result of this code, your website view will change based on the code that is added to it. Next step is to preview your website and you should see that when the window is 600px or less that the element you targeted will change.
Questions?
If you have any questions about media queries, please visit the contact page. We will be happy to answer your questions about this topic!
For more information on CSS and Media Queries please you can read this article from w3schools.com