Before we start adding responsive elements to our theme, let's have a look at the basic techniques we're going to work with. When building a site for a device with a small screen, we have to make sure our elements scale relative to the size of the screen.
We might also have to create a different navigation. A wide drop-down navigation would probably not work well on a cell phone.
Media queries are an important part of responsive layouts. They are part of CSS to make it possible to add styles specific to a certain media. Media queries can target the output type, screen size, as well as the device orientation, and even the density of the display.
But let's have a look at a simple example before we get lost in theory:
#header {
background-repeat: no-repeat;
background-image: url(logo.png);
}
@media print {
#header {
display: none;
}
}The highlighted line in the preceding code snippet makes sure that all the nested styles are only used if the...