Skip to main content

Introduction to Responsive Web Design - Media Queries

What is a Media Query?​

A media query is a CSS technique that allows you to apply different styles to a web page based on the characteristics of the device or screen on which the page is being viewed. With media queries, you can create responsive designs that adapt to different screen sizes, resolutions, and orientations.

Media queries use the "@media" rule in CSS to specify a set of styles that should be applied when a certain condition is met.

As an example:

@media only screen and (max-width: 768px) {
     body {
          font-size: 14px;
     }
}

In this example:

  • The "@media" rule specifies that the following styles should be applied only when the screen width is less than or equal to 768 pixels.
  • The "body" selector then applies a font size of 14 pixels to the text of the web page.
  • This will make the text easier to read on smaller screens.

Add a Breakpoint​

To add a breakpoint to your CSS code, you can use a media query to specify the conditions under which a certain set of styles should be applied.

As an example:

@media only screen and (min-width: 768px) {
     /* styles for screens wider than 768px */
}

In this example:

  • The "@media" rule specifies that the following styles should be applied only when the screen width is greater than or equal to 768 pixels.

You can then add your desired styles within the curly braces.

For example, if you want to change the font size and color of your navigation links when the screen width is wider than 768 pixels

As an example:

@media only screen and (min-width: 768px) {
     .nav-link {
          font-size: 16px;
          color: #333;
     }
}

In this example:

  • The ".nav-link" selector applies a font size of 16 pixels and a color of #333 to the navigation links when the screen width is wider than 768 pixels.

Always Design for Mobile First​

Designing for mobile first is a best practice in web design that involves starting the design process with the smallest screen size in mind and gradually adding more complex layouts and features as the screen size increases.

Here are some benefits of designing for mobile first:

Better User Experience​

Designing for mobile first ensures that the most important content and features are easily accessible on smaller screens, which can improve the user experience for all users, regardless of their device.

Faster Load Times​

Mobile devices often have slower internet connections than desktop computers, so designing for mobile first can help to reduce the file size of your website, resulting in faster load times for all users.

Easier to Scale Up​

Starting with a simpler mobile design makes it easier to add more complex features and layouts as the screen size increases. This approach can save time and reduce the risk of overcomplicating your design.

SEO Benefits​

Google and other search engines give preference to mobile-friendly websites, so designing for mobile first can help to improve your website's search engine rankings and visibility.

Orientation: Portrait / Landscape​

In portrait orientation, the screen is taller than it is wide, while in landscape orientation, the screen is wider than it is tall.

Designing for both portrait and landscape orientations is important for creating a responsive website that works well on a wide range of devices.

Here are some tips for designing for both portrait and landscape orientations:

Use Flexible Layouts​

Use a flexible layout that adapts to different screen sizes and orientations. This can include using responsive design techniques, such as fluid grids and flexible images.

Test Both Orientations​

Test your website in both portrait and landscape orientations to ensure that it looks good and functions properly in both modes.

Prioritize Content​

Make sure that the most important content and functionality is easily accessible in both portrait and landscape orientations. This can include placing key navigation elements at the top of the screen and ensuring that important buttons and links are large enough to be easily tapped with a finger.

Consider Landscape-Specific Features​

Consider adding landscape-specific features to your website, such as horizontal navigation or side-scrolling content. However, be careful not to make the landscape mode too different from the portrait mode, as this can confuse users and create a disjointed user experience.

Example​

Here is an example of how to use CSS to adjust the layout of a webpage for portrait and landscape orientations:

/* Styles for portrait orientation */
@media screen and (orientation: portrait) {
     .header {
          height: 100px;
          background-color: #333;
     }

     .main-content {
          width: 100%;
     }
}

/* Styles for landscape orientation */
@media screen and (orientation: landscape) {
     .header {
          height: 80px;
          background-color: #666;
     }

     .main-content {
          width: 80%;
          float: left;
     }

     .sidebar {
          width: 20%;
          float: right;
     }
}

In this example:

  • We use media queries to adjust the layout of a webpage for portrait and landscape orientations.
  • In portrait orientation, the header has a height of 100 pixels and a background color of #333.
  • The main content takes up the full width of the screen.
  • In landscape orientation, the header has a height of 80 pixels and a background color of #666.
  • The main content takes up 80% of the screen width and floats to the left, while the sidebar takes up 20% of the screen width and floats to the right.

Change Font Size With Media Queries​

Media queries can also be used to adjust the font size of text based on the screen size or device. This is important for creating a responsive design that is easily readable on all devices, from mobile phones to large desktop screens.

As an example:

/* Default font size */
body {
     font-size: 16px;
}

/* Adjust font size for smaller screens */
@media (max-width: 767px) {
     body {
          font-size: 14px;
     }
}

/* Adjust font size for larger screens */
@media (min-width: 1200px) {
     body {
          font-size: 18px;
     }
}

In this example:

  • We set the default font size to 16 pixels for all screen sizes.
  • Then, we use media queries to adjust the font size for smaller and larger screens.
  • For screens with a maximum width of 767 pixels, we reduce the font size to 14 pixels.
  • This is a common breakpoint for mobile devices and ensures that the text is easily readable on smaller screens.
  • For screens with a minimum width of 1200 pixels, we increase the font size to 18 pixels.

This is a common breakpoint for large desktop screens and ensures that the text is easily readable on larger screens without being too large on smaller screens.