How to add new breakpoint in magento 2?

Question

I need to add custom breakpoint.
for example

1. max-width: 479
   
2. max-width: 767
   
3. max-width: 1023
   

Thanks in advanced.

Answer 1

According to Magento dev docs you should create and add your breakpoint variable to app/design/frontend/[package]/[theme]/web/css/source/variables.less

@screen__breakpoint_example: 1200px;

In my theme I have this as _variables.less. Underscore in the file name means that the file isn’t used separately, but is part of other files.

From here you add a new media query that contains your breakpoint. Create the following file in your theme app/design/frontend/[package]/[theme]/web/css/source/lib/_responsive.less This will override Magento's default media queries.

Make sure to copy over all contents from lib\web\css\source\lib\_responsive.less into your theme's _responsive.less if you want keep Magento's default media queries.

Keep in mind Magento 2 is mobile first when adding your media query.

//
//  Style groups for 'desktop' devices
//  ---------------------------------------------

& when (@media-target = 'desktop'), (@media-target = 'all') {

  @media all and (min-width: @screen__m),
  print {
    .media-width('min', @screen__m);
  }

  @media all and (min-width: (@screen__m + 1)),
  print {
    .media-width('min', (@screen__m + 1));
  }

  @media all and (min-width: @screen__l),
  print {
    .media-width('min', @screen__l);
  }

  @media all and (min-width: @screen__breakpoint_example),
  print {
    .media-width('min', @screen__breakpoint_example);
  }

  @media all and (min-width: @screen__xl),
  print {
    .media-width('min', @screen__xl);
  }
}

The values of these other breakpoint variables can be referenced here lib/web/css/source/lib/variables/_responsive.less Now you can use your breakpoint anywhere in your theme.

.media-width(@extremum, @break) when (@extremum = 'min') and (@break =  @screen__breakpoint_example) {
    // add styles
}

For more detail see: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/responsive-web-design/rwd-breakpoints.html

Answer 2

In app/design/frontend/[package]/[theme]/web/css/source/_extend.less:

add your own:

@mobile:      ~"screen and (max-width: 472px)";
@tablet:      ~"screen and (min-width: 768px)";

And then use it:

.selector {
    @media @tablet {