Join Morten Rand-Hendriksen for an in-depth discussion in this video What are media queries and how do they work?, part of WordPress: Building Responsive Themes.
- View Offline
At the heart of responsive design lies a specific type of CSS, or Cascading Style…Sheets code, known as media queries.…Media queries are conditional statements that tell the browser to use specific…sets of styles depending on the size of the screen and other factors.…Let's take a look at how simple media queries work and how to build them.…What I am going to do here is add a simple media query to the style sheet of this theme.…So, I'll go to where I have my theme stored inside my WordPress installation.…
It's under the WordPress installation, under wp-content/themes/Anaximander.…If I scroll down here, we have the style.css file.…I am going to open this in my text editor, which is Notepad++.…You can open it in any text editor;…it doesn't really make any difference.…What I am going to do here is add a simple media query all the way at the bottom…of the document, and that media query is going to change the font-family on the…entire site when the screen is smaller than a certain size.…
The first thing I need to do in a media query is to start a media query.…
- What is responsive design?
- Installing the Anaximander example theme
- Deciding what screen sizes to target
- Designing menus
- Adding responsive images and video
- Using CSS media queries to apply different styles
- Handling sidebars on mobile displays
- Dealing with footer widgets
- Installing jQuery Masonry