vueuse 中文文档

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')

在线例子

例子

Catalog
vueuse 入门 State 状态 Elements 元素 Browser 浏览器 useBluetooth 蓝牙函数 useBreakpoints 网页网格断点 useBroadcastChannel 跨网页通讯 useBrowserLocation 响应式location useClipboard 粘贴复制 useColorMode 皮肤颜色切换 useCssVar 修改css变量 useEventListener 事件监听 useEyeDropper 取色器 useFavicon 设置浏览器窗口图标 useFileDialog 文件选择器 useFileSystemAccess 操作本地文件 useFullscreen 全屏模式 useGamepad 游戏手柄 useImage 图片 useMediaControls 视频音频控制 useMediaQuery 媒体查询 useMemory 响应式内存信息 useObjectUrl 响应式对象URL