In responsive design it’s possible to set up breakpoints in the CSS (cascading style sheets) to different sized screens such as mobile, tablets and desktop. These are added in special CSS rules called ‘media queries’. A media query is a CSS technique first introduced in CSS3. Below are some examples of media queries, the first applying to screens below a width of 990px (about tablet sized) and the second applying to screens below a width of 600px (about mobile sized). Style rules would be added between the trailing brackets as shown.
/* apply style rules to screens below 960px wide, about tablet width */
@media only screen and (max-width: 990px) { /* add CSS rules for this screen size here */ }
/* apply style rules to screens below 600px wide, about mobile width */
@media only screen and (max-width: 600px) { /* add CSS rules for this screen size here */ }
Ideally web designers should strive for a flexible design that adapts to just about any screen size, but it can be conceptually beneficial to define mobile, tablets and desktop. These are points where elements of the layout can change, like columns stacking instead of being next to each other.
To learn more about responsive design and media queries see these articles:
Creating Media Queries for Responsive Web Designs – from Sitepoint – 4/25/17
Responsive Web Design – Media Queries – from W3 Schools
Media Queries for Standard Devices – from CSS Tricks – 10/9/17