Learn About CSS Media Queries for all Devices @ TwentySixForty

CSS Media Queries for all Devices Overview.

This tutorial will cover what CSS media queries are, the different media types, the CSS media query syntax, and how to use CSS media queries for all devices. I will also explain the mobile-first and desktop-first approaches, 3 types of Bootstrap CSS media queries and where to place the media queries in your stylesheet.

Quickies.

What are CSS Media Queries?
CSS Media Types.
CSS Media Query Syntax.
Should I Use Mobile-First or Desktop-First?
Bootstrap CSS Media Queries.
Mobile First Breakpoints.
Desktop First Breakpoints.
Targeted Breakpoints.
Where Do I Place CSS Media Queries in my Stylesheet?

What are CSS Media Queries?

CSS media queries give you the ability to assign CSS rules to a webpage on a conditional basis. This allows you to use different styles based on things like screen size, screen resolution, screen orientation and/or device type.

Media Types.

CSS media queries allow us to target 3 media types, screen, print, speech and all. If no media type is declared, all will be used.

Screen Media Type.

The screen media type is used for computer screens. Desktops, laptops, tablets, and mobile devices.

Print Media Type.

The print media type is used for printers. Documents and paged material viewed in print preview mode.

Speech Media Type.

The speech media type is used for screen readers and devices that read the webpage aloud.

All Media Type.

If you don’t designate a media type, All will be used and it targets all media types.

CSS Media Query Syntax.

The first part of the media query syntax is @media. After that, you can declare a media type if you like. If no media type is declared, All will be used. Next is the logical operator and you can use Or, Not or And. Finally, you must include at least one expression. Example:

@media screen and (min-width: 992px){
	p{
		color: #0000ff;
	}
}

The code above will turn all paragraph text blue on all screens that are wider than 992px.

Should I Use Mobile-First or Desktop-First?

I am not going to get into the mobile-first/desktop-first design debate here but here is a quick explanation of the different approaches.

Mobile-First Approach.

The mobile-first approach, or Progressive Advancement, is designing a website specifically for a mobile device. After the mobile design is finished the design can be adapted and customized to work on tablets and desktops. The mobile version of the website is the priority in this approach.

Desktop-First Approach.

The desktop-first approach, or Graceful Degradation, involves designing a website specifically for desktop devices. After the initial design is done the site is modified to work on tablets and mobile devices. The desktop version of the website is the priority in this approach.

Bootstrap CSS Media Queries.

Bootstrap is a very popular front-end toolkit used for building responsive websites. Below are the default Bootstrap CSS breakpoints for you to use. There are many other sets of CSS breakpoints for all types of devices. If you need a more specific set of media queries check out this website: CSS Tricks.

/* Bootstrap 4 Mobile First Breakpoints */
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {
}
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
}
// Large devices (desktops, 992px and up)
@media (min-width: 992px) {
}
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
}

/* Bootstrap 4 Desktop First Breakpoints */
// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) {
}
// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) {
}
// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) {
}
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {
}

/* Bootstrap 4 Targeted Breakpoints */
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
}
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) {
}
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) {
}
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) {
}
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {
}

Where Do I Place CSS Media Queries in my Stylesheet?

You should place your CSS media queries at the bottom of your stylesheet. This not only keeps things organized and easy to find but if you have a duplicate style outside of and below a query, it will override the style inside the media query.