Media Queries in Responsive Design
Intro
There are many websites and utilities out there that help with the responsive design of your websites(bootstrap, materialize) to the point where most of the time you don’t need to think about it too much. But these sites don’t cover more custom things that you may want. For example, what if you want a button to be moved depending on the size of the screen, or what if you want the color of your header changed? In this case Media Queries would be a useful tool to know.
What is responsive design?
Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries. The goal of responsive design is to build web pages that detect the visitor’s screen size and orientation and change the layout accordingly.
As you can see from the images on the left, at full screen the twitter login page shows a quick description of twitter on the left, login or signup options on the right, and a small footer on the bottom.
The image below that is the same page but for the screen size of an iphone X. Notice how now the quick description is moved from the left of the page to under the login/ sign up options. There are now four different buttons to login/ signup, and the option to put in your username and password right away to log in are gone.
What are breakpoints?
Breakpoints are the points at which your sites content will respond to provide the user with the best possible layout to consume the information. When you first begin to work with Responsive Design you will define your breakpoints at the exact device widths that you are looking to target.
As you can see from the gif above without breakpoints the elements just shrink as they adjust to the screen. With breakpoints the elements change and adjust as the screen width changes. Break points are a key functionality when using media queries.
The toggle device toolbar in the dev tools of your browser is a great way to check for break points and view the responsiveness of your web application.
The twitter gif above shows that there are two breakpoints on the twitter login homepage. One breakpoint at 808px screen width, that moves the app description from the middle of the page to the left side. Then another one at 1016px screen width, which adds a username, password text area and Log In button to the top right of the screen.
How to Use Media Queries
As stated previously breakpoints are a key role to using media queries. Everytime you use media queries you have to state at what device width you want the css to change.
There are two ways you can use media queries.
- You can have many different CSS files, each activating and deactivating at a different breakpoint. Typically this is done when you have large chunks of CSS that you want to manipulate. This way also keeps better track of styling since you can name your CSS files according to what you want it to size to.
Recreating the twitter login homepage with media queries would probably look like something below.
<link rel="stylesheet" media="screen and (max-width: 808px)" href="css/phone.css" /><link rel="stylesheet" media="screen and (min-width: 809px) and (max-width: 1015px)" href="css/tablet.css" /><link rel="stylesheet" media="screen and (min-width: 1016px)" href="css/computer.css" />
2. Or you can put the media query inside of a single CSS file. Typically this is done when you only have smaller bits of CSS that you want to manipulate.
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}only screen: The only keyword is used to prevent older browsers that do not support media queries with media features from applying the specified styles. is “lightblue”
For every media query you make you need to give breakpoints. The min-width: 500px is the minimum screen width at which you want your CSS to kick in. The max-width: 500px is the maximum screen width that you want your CSS to stay on until. min-width is thought of as the starting point and max-width is the ending point. With this you can make your CSS work up to a certain screen width, between a range, and start at a certain width.
Citations
