Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] breakpoints.ts is wrong #3701

Open
7 tasks done
Jesse205 opened this issue Jan 8, 2024 · 0 comments
Open
7 tasks done

[Bug] breakpoints.ts is wrong #3701

Jesse205 opened this issue Jan 8, 2024 · 0 comments

Comments

@Jesse205
Copy link

Jesse205 commented Jan 8, 2024

Describe the bug

This file: https://github.com/vueuse/vueuse/blob/main/packages/core/useBreakpoints/breakpoints.ts

I tested these breakpoints.

  • breakpointsVuetify, width 496, but got [], missing xs
    image
  • breakpointsVuetify, width 667, but got ["xs"], missing sm
    image
  • breakpointsVuetify, width 1015, but got ["xs", "sm"], missing md
    image

Its results are different from vuetify's table.

Deice code Type Range
Extra small xs Small to large phone < 600px
Small sm Small to medium tablet 600px > < 960px
Medium md Large tablet to laptop 960px > < 1264px*
Large lg Desktop 1264px > < 1904px*
Extra large xl 4k and ultra-wide > 1904px*

I think it should be like breakpointsBootstrapV5, where xs is set to 0 and the other numbers are moved back one code in order.

Also, I looked at the documentation, Tailwind, MasterCss are fine, AntDesign points out on another page that xs is a width less than 576, quasar have the same problem with Vuetify, and PrimeFlex's documentation points to a 404 page.

Reproduction

https://stackblitz.com/edit/vitejs-vite-qvqxdv/?file=src%2FApp.vue,package.json

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (4) x64 Intel(R) Core(TM) i3-4170 CPU @ 3.70GHz
    Memory: 1.64 GB / 11.87 GB
  Binaries:
    Node: 21.2.0 - D:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - D:\Program Files\nodejs\yarn.CMD
    npm: 10.2.3 - D:\Program Files\nodejs\npm.CMD
    pnpm: 8.14.0 - D:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (120.0.2210.77)
    Internet Explorer: 11.0.19041.3636

Used Package Manager

pnpm

Validations

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant