Learning Code

Breakpoints

Often in the design of a website, once the website reaches a certain size, functionality is lost or the visual appearance loses cohesion or balance. Sometimes this happens at multiple screen widths or even orientations. Once these breakpoints are reached, a change in design (in the CSS) is necessary.

A breakpoint is usually a specific point where major design changes occur to optimize the functionality/appearance of the site at the larger or smaller screen size. Most websites have at least one breakpoint to change between mobile optimization and larger device optimization.

Setting the Initial Viewport Size

For media queries to work properly in the Chrome browser, it is necessary to set an initial viewport size. This is not required for other browsers, though it usually improves the scale used and is still worth using.

In the head section of your HTML, you can set the viewport (the display/browser width) to the size of the device's width. This is a good first step to create a site optimized for any device.

<head>
      <title>Site Title</title>
      <meta name="viewport" content="width=device-width, intial-scale=1.0">
</head>

Meta is short for metadata and tells the browser that there is information it needs to understand the webpage. Setting the name to viewport tells the browser what the data is for/about. The content settings changes the viewport to set the scale of the page to the width of the device.

What are the best breakpoints?

More +Less —

There are no perfect breakpoints that will work on every site. You have to test your site on different screen sizes and decide what makes sense for your design. I would not target the size of specific devices for your breakpoints - there are too many devices and the specs are always changing which each new release.

Use "Responsive Design Mode" in the browser to see where your site layout breaks down.

• Chrome: at the top left of the "Inspect" window, toggle on (right-click on the page and select "Inspect" to open the "Inspect" window)
• Firefox: at the top right of the "Inspect" window, toggle on (right-click on the page and select "Inspect" to open the "Inspect" window)
• Safari: at the top menu, under "Develop", go to "Enter Responsive Design Mode" (to enable the Develop menu item, in the menu, go to Safari → Preferences → Advanced and then check "Show Develop menu in menubar")

As a starting point, you could set 1 breakpoint somewhere between 500px and 800px to change from the mobile optimized design to any changes for larger screens. Again, as you test your site responsively, add and adjust breakpoints where it makes sense for your site.

Using Media Queries

Media queries can be added at the bottom of an external stylesheet or by using multiple stylesheets. We will be focusing on the first method.

Syntax

Sometimes media queries are used to change settings for a specific media type:

@media type {
selector {property:value;}
selector {property:value;}
}

More +Less —

Types include:

• all (the default if a type is not specified)
• print (for printing out the page)
• screen (for all screen devices)
• speech

Sometimes media queries are used to change settings for a specific feature (this is usually to change the size).

@media (feature){
selector {property:value;}
}
Common features include:

• min-width or max-width (while width can be used, these are better options)
• min-height or max-height (again height can be used but is not ideal)
• orientation: landscape or orientation: portrait
• min-resolution or max-resolution

Sometimes media queries are used to change settings for multiple features. This could be to set a minimum and maximum size restriction or to target different features such as both size and orientation.

@media (feature) and (feature){
selector {property:value;}
selector {property:value;}
selector {property:value;}
}

Sometimes media queries are used to change settings for both a type and size:

@media type and (size){
selector {property:value;}
}

In Action

Media queries should be added at the very end of the style sheet. When there are multiple media queries, it is helpful to add them in order of size from smallest to largest. At it's most simple, a media query could be as follows:

Notice that there is no semicolon ; at the end of the min-width value. Semicolon's in that place would break the functionality of the media query.

Added complexity could be added by adding the type and/or additional features.

Media Queries with Flex

Flexbox properties work particularly well with Media Queries.

Flex-wrap

On larger screen sizes, you may want the content of a flex row to stay in one row. However that is likely not ideal on small devices, in that case the content of the row may need to wrap and form mulitple rows instead.

Flex-direction

On a small screen size, the menu (or another area of content) may be best in a vertical orientation. Then in a larger screen, the menu (or etc.) could benefit from being horizontal instead.