diff --git a/packages/docs/src/components/features/BreakpointsTable.vue b/packages/docs/src/components/features/BreakpointsTable.vue index 43dbc5852c1..4523e9cfb29 100644 --- a/packages/docs/src/components/features/BreakpointsTable.vue +++ b/packages/docs/src/components/features/BreakpointsTable.vue @@ -76,35 +76,35 @@ device: 'small', code: 'sm', type: 'breakpoints-table.small-to-medium-tablet', - range: '600px > < 960px', + range: '600px > < 840px', }, { icon: 'mdi-laptop', device: 'medium', code: 'md', type: 'breakpoints-table.large-tablet-to-laptop', - range: '960px > < 1280px', + range: '840px > < 1145px', }, { icon: 'mdi-monitor-small', device: 'large', code: 'lg', type: 'breakpoints-table.desktop', - range: '1280px > < 1920px', + range: '1145px > < 1545px', }, { icon: 'mdi-monitor', device: 'extra-large', code: 'xl', type: 'breakpoints-table.large-to-extra-large', - range: '1920px > < 2560px', + range: '1545px > < 2138px', }, { icon: 'mdi-monitor-screenshot', device: 'extra-extra-large', code: 'xxl', type: 'breakpoints-table.extra-large-to-extra-extra-large', - range: '> 2560px', + range: '> 2138px', }, ] diff --git a/packages/docs/src/pages/en/features/display-and-platform.md b/packages/docs/src/pages/en/features/display-and-platform.md index e02dd354094..ec456854824 100644 --- a/packages/docs/src/pages/en/features/display-and-platform.md +++ b/packages/docs/src/pages/en/features/display-and-platform.md @@ -148,19 +148,19 @@ In the following example, we use a switch statement and the current breakpoint n { // Breakpoints xs: boolean // 0 - 599 - sm: boolean // 600 - 959 - md: boolean // 960 - 1279 - lg: boolean // 1280 - 1919 - xl: boolean // > 1920 - xxl: boolean - smAndDown: boolean // < 960 - smAndUp: boolean // > 600 - mdAndDown: boolean // < 1280 - mdAndUp: boolean // > 960 - lgAndDown: boolean // < 1919 - lgAndUp: boolean // > 1280 - xlAndDown: boolean - xlAndUp: boolean // < 1920 + sm: boolean // 600 - 839 + md: boolean // 840 - 1144 + lg: boolean // 1145 - 1544 + xl: boolean // 1545 - 2137 + xxl: boolean // >= 2138 + smAndDown: boolean // < 840 + smAndUp: boolean // > 599 + mdAndDown: boolean // < 1145 + mdAndUp: boolean // > 839 + lgAndDown: boolean // < 1545 + lgAndUp: boolean // > 1144 + xlAndDown: boolean // < 2138 + xlAndUp: boolean // > 1544 // true if screen width < mobileBreakpoint mobile: boolean diff --git a/packages/vuetify/src/composables/__tests__/display.spec.browser.ts b/packages/vuetify/src/composables/__tests__/display.spec.browser.ts index 597b7d0a8fe..74dfe164486 100644 --- a/packages/vuetify/src/composables/__tests__/display.spec.browser.ts +++ b/packages/vuetify/src/composables/__tests__/display.spec.browser.ts @@ -186,15 +186,15 @@ describe('display', () => { description: 'WSXGA+ (landscape)', width: 1680, height: 1050, - name: 'lg', + name: 'xl', }, [ - 'lg', + 'xl', 'smAndUp', 'mdAndUp', - 'lgAndDown', 'lgAndUp', 'xlAndDown', + 'xlAndUp', ], ], [ diff --git a/packages/vuetify/src/composables/display.ts b/packages/vuetify/src/composables/display.ts index 59587a66bff..3f0e339e1ce 100644 --- a/packages/vuetify/src/composables/display.ts +++ b/packages/vuetify/src/composables/display.ts @@ -88,10 +88,10 @@ const defaultDisplayOptions: DisplayOptions = { thresholds: { xs: 0, sm: 600, - md: 960, - lg: 1280, - xl: 1920, - xxl: 2560, + md: 840, + lg: 1145, + xl: 1545, + xxl: 2138, }, } diff --git a/packages/vuetify/src/styles/settings/_variables.scss b/packages/vuetify/src/styles/settings/_variables.scss index 8e44f6bba68..4f9fe4b6d96 100644 --- a/packages/vuetify/src/styles/settings/_variables.scss +++ b/packages/vuetify/src/styles/settings/_variables.scss @@ -125,10 +125,10 @@ $grid-breakpoints: map-deep-merge( ( 'xs': 0, 'sm': 600px, - 'md': 960px, - 'lg': 1280px, - 'xl': 1920px, - 'xxl': 2560px, + 'md': 840px, + 'lg': 1145px, + 'xl': 1545px, + 'xxl': 2138px, ), $grid-breakpoints ); @@ -155,10 +155,10 @@ $container-max-widths: map-deep-merge( ( 'xs': null, 'sm': null, - 'md': map.get($grid-breakpoints, 'md') * 0.9375, - 'lg': map.get($grid-breakpoints, 'lg') * 0.9375, - 'xl': map.get($grid-breakpoints, 'xl') * 0.9375, - 'xxl': map.get($grid-breakpoints, 'xxl') * 0.9375, + 'md': 100 * math.floor(map.get($grid-breakpoints, 'md') * 0.009375), + 'lg': 100 * math.floor(map.get($grid-breakpoints, 'lg') * 0.009375), + 'xl': 100 * math.floor(map.get($grid-breakpoints, 'xl') * 0.009375), + 'xxl': 100 * math.floor(map.get($grid-breakpoints, 'xxl') * 0.009375), ), $container-max-widths );