Media Queries

In general, responsive design consists of fluid grids, fluid images, and media queries.
Media queries are CSS rules that include CSS code only when certain conditions are met.

Media Features

A media feature is the expression or set of conditions inside a media query such as orientation, width and resolution.

Example

@media only screen and (min-width: 768px), 
       only screen and (min-width: 768px) and (orientation: landscape){ ... }

landscape and portrait are acceptable values for the media feature, orientation.

Media Breakpoints

Generally, any media query that adjusts the layout based on a certain width could be called a breakpoint.
It is important to create breakpoints based on content, rather than based on popular device screen sizes, otherwise some breakpoints will not be ready for devices that have not yet been released.

In your design, you should consider creating major breakpoints as well as minor breakpoints to adjust your layout the best way possible.

Cost Breakpoints

Each breakpoint slightly increases the complexity of design and code, based on a mobile-first approach.