fix(breakpoints): set max-widths for breakpoints to non-integers to handle subpixel queries (#13828)

This commit is contained in:
Joey Perrott
2018-11-02 17:23:47 -07:00
committed by Jeremy Elbourn
parent 670360516f
commit 077f68e3cb
+12 -12
View File
@@ -8,24 +8,24 @@
// PascalCase is being used as Breakpoints is used like an enum.
// tslint:disable-next-line:variable-name
export const Breakpoints = {
XSmall: '(max-width: 599px)',
Small: '(min-width: 600px) and (max-width: 959px)',
Medium: '(min-width: 960px) and (max-width: 1279px)',
Large: '(min-width: 1280px) and (max-width: 1919px)',
XSmall: '(max-width: 599.99px)',
Small: '(min-width: 600px) and (max-width: 959.99px)',
Medium: '(min-width: 960px) and (max-width: 1279.99px)',
Large: '(min-width: 1280px) and (max-width: 1919.99px)',
XLarge: '(min-width: 1920px)',
Handset: '(max-width: 599px) and (orientation: portrait), ' +
'(max-width: 959px) and (orientation: landscape)',
Tablet: '(min-width: 600px) and (max-width: 839px) and (orientation: portrait), ' +
'(min-width: 960px) and (max-width: 1279px) and (orientation: landscape)',
Handset: '(max-width: 599.99px) and (orientation: portrait), ' +
'(max-width: 959.99px) and (orientation: landscape)',
Tablet: '(min-width: 600px) and (max-width: 839.99px) and (orientation: portrait), ' +
'(min-width: 960px) and (max-width: 1279.99px) and (orientation: landscape)',
Web: '(min-width: 840px) and (orientation: portrait), ' +
'(min-width: 1280px) and (orientation: landscape)',
HandsetPortrait: '(max-width: 599px) and (orientation: portrait)',
TabletPortrait: '(min-width: 600px) and (max-width: 839px) and (orientation: portrait)',
HandsetPortrait: '(max-width: 599.99px) and (orientation: portrait)',
TabletPortrait: '(min-width: 600px) and (max-width: 839.99px) and (orientation: portrait)',
WebPortrait: '(min-width: 840px) and (orientation: portrait)',
HandsetLandscape: '(max-width: 959px) and (orientation: landscape)',
TabletLandscape: '(min-width: 960px) and (max-width: 1279px) and (orientation: landscape)',
HandsetLandscape: '(max-width: 959.99px) and (orientation: landscape)',
TabletLandscape: '(min-width: 960px) and (max-width: 1279.99px) and (orientation: landscape)',
WebLandscape: '(min-width: 1280px) and (orientation: landscape)',
};