厌倦了编写复杂的媒体查询？ sveltekit window 指令可以帮助您以编程方式简化它们。借助此布局组件 viewoirtsettingscatcher 组件及其关联的存储 biewportsettingsstore，它们在本主题中呈现。
抓取视口内部尺寸
svlete:window 指令绑定的非常简单的使用：
let innerwidth: number = 1600 let innerheight: number = 1200
登录后复制
店内注册
$: viewportsettingsstore.register ({ innerwidth, innerheight })
登录后复制
关联的计算存储
import { writable} from 'svelte/store'const { subscribe, update } = writable ({ innerwidth: 1600, innerheight: 1200, ratio: 16/12, orientation: 'landscape', wide: false})function register ({ innerwidth, innerheight }) { const ratio = innerwidth / innerheight const orientation = ratio >= 1 ? 'landscape' : 'portrait' const wide = (ratio > 2) || (ratio { return { innerwidth, innerheight, orientation, ratio, wide } })}export const viewportsettingsstore = { subscribe, register }
登录后复制
简单的用法
只需在你的组件中导入 viewportsettingsstore
登录后复制
et voilà…完成了。
以上就是SvelteKit 响应式助手的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2673360.html
