Vue useBreakpoints 响应式网页网格断点

Vue useBreakpoints 响应式网页网格断点，我们为了让网页适配各种屏幕尺寸，通常用响应式的CSS库，比如Tailwind样式库，useBreakpoints可以让你知道当前布局的规格。

什么是breakpints

我们属知到bootstrap是以12等分，网页以下的代码在大屏幕下显示4列，在中型屏幕下显示2列，大中小的分界点叫断点。

<div class="container">
   <div class="col-lg-3 col-md-6" </div>
   <div class="col-lg-3 col-md-6" </div>
   <div class="col-lg-3 col-md-6" </div>
   <div class="col-lg-3 col-md-6" </div>
</div>

代码示例

//Tailwind.css的断点
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'

const breakpoints = useBreakpoints(breakpointsTailwind)

const smAndLarger = breakpoints.greaterOrEqual('sm') // sm and larger
const largerThanSm = breakpoints.greater('sm') // only larger than sm
const lgAndSmaller = breakpoints.smallerOrEqual('lg') // lg and smaller
const smallerThanLg = breakpoints.smaller('lg') // only smaller than lg

自定义断点

import { useBreakpoints } from '@vueuse/core'

const breakpoints = useBreakpoints({
  tablet: 640,
  laptop: 1024,
  desktop: 1280,
})

const laptop = breakpoints.between('laptop', 'desktop')

在线例子

例子