[Magento] Magento 2 Breakpoint Hint

_extend.less

& when (@media-common = true) {
  body:before {
    background: rgba(0,0,0,.5);
    color: #fff;
    height: 18px;
    line-height: 16px;
    padding: 0 4px;
    font-size: 12px;
    position: fixed;
    top: 50%;
    left: 0;
    margin-top: -9px;
  }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xl) {
  body:before {
    content: 'xl';
  }
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
  body:before {
    content: 'l';
  }
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
  body:before {
    content: 'm';
  }
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
  body:before {
    content: 's';
  }
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
  body:before {
    content: 'xs';
  }
}
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {
  body:before {
    content: 'xxs' !important;
  }
}