的日历插件,FullCalendar 拥有超过 300 种设置,支持模块化导入,几乎可以实现任何效果。...此教程是基于Vue2,FullCalendar 同时也支持 Vue3,文档在https://fullcalendar.io/docs/vue 官方指南提示不会深入介绍Vue的使用,需要自己根据示例和可运行的项目参考...还有一些需要额外付费的插件。如timeline、timegrid、daygrid等插件。...导入了核心组件和一些扩展组件,在 components 中注册组件 最后使用 FullCalendar 运行项目,日历大概就是这个样子。 options 属性就是控制日历的关键。...这里面列举了部分属性和事件,需要更详细的api请看官方文档:https://fullcalendar.io/docs 四 参考资料 官方:https://fullcalendar.io/ 文档:https
设置日历agenda视图下左侧的时间显示格式,默认显示如:5:30pm 'h(:mm)tt' slotMinutes 在agenda的视图中, 两个时间之间的间隔(分钟) 30 defaultEventMinutes...date 设置日历初始化时的日期,只有在周视图和日视图中有效 prev method,进入到上一月(周、天)视图$('#calendar').fullCalendar('prev'); next method..."W" 鼠标单击和滑过 以下列出的是当鼠标单击或者滑过日历中的某个元素时,回调的函数callback。...true unselectCancel 指定哪些元素不会清空当前的选中,以JQUERY选择器的方式指定 '#someId'。...editable 事件是否可编辑,可编辑是指可以移动, 改变大小等。 source 指向次event的eventsource对象。 color 背景和边框颜色。
使视口可以通过任意一侧的大手柄随意调整大小 特定设备。 将视口锁定为特定设备确切的视口大小,并模拟特定设备特性 媒体查询 媒体查询是自适应网页设计的基本部分。...快速预览媒体查询 点击媒体查询条形,调整视口大小和预览适合目标屏幕大小的样式 查看关联的 CSS 右键点击某个条形,查看媒体查询在 CSS 中何处定义并跳到源代码中的定义 元素面板(Elements)...例如,如果您的 JavaScript 正在更改 DOM 元素的样式,请将 DOM 断点设置为在元素属性修改时触发。...(); 查看元素事件侦听器 在 Event Listeners 窗格中查看与 DOM 节点关联的 JavaScript 事件侦听器 ?...DOM更改断点 当您想要更改DOM节点或其子节点的代码时,使用DOM更改断点 设置DOM更改断点: 切换到 Elements 面板。 找到您想设置断点的元素并右键单击该元素。
位图像素是栅格图像(如:png,jpg,gif等)最小的数据单元。 位图和矢量图 位图图像是由称作像素(图片元素)的单个点组成的。放大后会失真。...理想视口的好处 注意:理想视口不是真实存在的视口 设置理想视口的方法 2-缩放 PC 端 放大时 布局视口变小 视觉视口变小 元素的像素大小不变 缩小时 布局视口变大 视觉视口变大 元素的像素大小不变...touchstart 事件的作用在于实现移动端的界面交互 事件绑定 方式一 方式二 点击穿透 touch 事件结束后会默认触发元素的 click 事件,如没有设置完美视口,则事件触发的时间间隔为...350ms 左右,如设置完美视口则时间间隔为 5ms 左右。...完美视口设置 通过 JS 设置页面的根元素字体大小。
Step3: 动态设置 html 标签根字体大小 4. Step4: 将设计图中的尺寸换算成 rem 5. Step5: 媒体查询设置body字体大小 6....本文不再对常见概念进行说明,如:设备分辨率、DPR、单位、视口、meta:viewport等,如果对这类概念不甚了解,可以先去搜索引擎查询了解下。 1....Step2: 消除DPR差异 消除DPR差异只需要将布局视口大小设为设备像素尺寸,可以通过修改viewport参数来实现。...Step4: 将设计图中的尺寸换算成 rem Step3进行了html根节点文字大小设置,然而意义何在?自然是为了开发者计算的方便。...Step5: 媒体查询设置body字体大小 其实完成了上述Step1~4,已经基本完成了移动端的适配工作,然而,有些情况下,如资讯类文字较多的页面,如果在大屏设备上展示,文字会过大,影响阅读体验,此时需要调整文字大小
本文不再对常见概念进行说明,如:设备分辨率、DPR、单位、视口、meta:viewport等,如果对这类概念不甚了解,可以先去搜索引擎查询了解下。 1....Step2: 消除DPR差异 消除DPR差异只需要将布局视口大小设为设备像素尺寸,可以通过修改viewport参数来实现。...,在html页面中引入下面代码即可自动完成计算: (function(doc, win) { var docEl = doc.documentElement, // 获取html标签 // 页面大小改变事件...Step4: 将设计图中的尺寸换算成 rem Step3进行了html根节点文字大小设置,然而意义何在?自然是为了开发者计算的方便。...Step5: 媒体查询设置body字体大小 其实完成了上述Step1~4,已经基本完成了移动端的适配工作,然而,有些情况下,如资讯类文字较多的页面,如果在大屏设备上展示,文字会过大,影响阅读体验,此时需要调整文字大小
Element.getBoundingClientRect 用法讲解 Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。...,就是该元素的 CSS 边框大小。...除了 width 和 height 以外的属性是相对于视图窗口的左上角来计算的。 width和height是计算元素的大小,其他属性都是相对于视口左上角来说的。...计算元素是否出现在视口内 利用的还是元素距离视口的位置小于视口的大小。 注意即便变成了负值,那么也表示元素曾经出现过在屏幕中只是现在不显示了而已。...返回的style是一个实时的 CSSStyleDeclaration 对象,当元素的样式更改时,它会自动更新本身。
例如,一个按钮应该在移动中可见,而在桌面视口中隐藏。 或者,在移动设备上隐藏但要在桌面上显示的导航元素。 隐藏元素时有三种不同的状态: 元素完全隐藏并从文档流中删除。...只有当视口宽度大于400px时,才会显示该图。我向元素添加了hidden`属性。 在CSS中,我使用hidden属性仅在所需的视口大小中显示元素。...为它保留的空间已经消失了。同样的概念也适用于在HTML中隐藏元素时。元素的预留空间已经没有了,它更改了文档流,或者在我们的示例中,更改了图书流堆栈。...image.png 稍后我们将对此进行讨论,以解释如何在特定断点或视口大小中不需要HTTP请求时减少HTTP请求。 style 元素 值得一提的是,有些元素的默认值是display: none。...更新:2020年1月13日 Dusan Milovanovic指出,pointer-events: none | auto可以用来禁用opacity为0的隐藏元素上的鼠标事件。
DOCTYPE html> HTML 4.01 Strict(HTML 4.01 严格模式)的 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(如font),它的文档类型声明:...; section 表示文档中的一个区域(或节),比如,内容中的一个专题组; main 定义文档的主要内容,该内容在文档中应当是独一无二的,不包含任何在文档中重复的内容,比如侧边栏,导航栏链接,版权信息...对于很多字体来说,1ex ≈ 0.5em; em 1em 等于父级元素的字体大小,2em 就是父级元素字体大小的二倍; rem 当用在根元素()的 font-size 上面时 ,它代表了它的初始值...; ch 代表元素所用字体 font 中“0”这一字形的宽度; vh 1vh 相当于视口高度的 1%,100vh 就是视口的高度; vw 1vw 相当于视口宽度的 1%,100vw 就是视口的宽度; vmax...视口高度 vw 和宽度 vh 两者中的最小值 vmin 视口高度 vw 和宽度 vh 两种中的最大值; % 相对于父级元素的大小来确定; 参考:CSS [1] CSS percentage
在本文中,我们将探讨 CSS 尺寸单位的四大类别。我们将了解这些尺寸单位的用途、它们的最佳工作原理,以及如何在每种情况下选择最佳尺寸单位,从而在各种媒体和设备尺寸下优化我们的布局。...本地行高或 lh 单位继承了祖先元素的行高值。 当项目使用多种字体和/或语言时,ex、cap、ic 和 lh 等单位尤其有用。即使用户更改了字体设置,也能保持垂直和大小比例。...它们是相对于初始包含块的大小计算的,如果是分页媒体,则是视口或页面。一个视口百分比单位等于初始包含块的 1%。这与百分比不同,百分比将尺寸设置为父元素宽度或高度的一定比例。...另一方面,动态视口尺寸并不稳定。当方向改变或用户滚动时,它们可能会改变。例如,当浏览器界面影响视口大小时,高度值为 100dvmax 的元素就会改变大小。...容器相对单位 视口相对单位适用于浏览器窗口的可用空间,而容器相对单位则是相对于元素的包含上下文的大小来计算的。
本文,我们将来讲解如何在 canvas 上实现坐标的定位,如下效果图所示: 我们顺便还显示了一个拖拽的功能,当然这个并不是使用 canvas 绘制,后面会讲到。...并且设置画笔 ctx 的粗细,颜色。绘制字体的大小,字体等。...,用于获取该元素相对于视口的位置和尺寸信息。...该方法返回一个 DOMRect 对象,其中包含以下属性: x: 元素左边界相对于视口左边界的距离 y: 元素上边界相对于视口上边界的距离 width: 元素的宽度 height: 元素的高度 top...: 元素上边界相对于视口上边界的距离 right: 元素右边界相对于视口左边界的距离 bottom: 元素下边界相对于视口上边界的距离 left: 元素左边界相对于视口左边界的距离 我们来讲个题外话
Tips: (1)渲染树并非显示所有元素,而只是占据空间元素,如display: none的元素不在渲染树中,而visibility: hidden的在渲染树中; (2)渲染树包含的内容只是元素的内容及其样式信息...3.布局 经过前两步的操作,我们知道了元素的内容和样式信息,但是实际在不同显示器中的大小和位置如何确定呢,这就需要进行布局操作了,有的地方称为"自动重排"(reflow)。...Webkit依据框模型来计算元素的位置和大小,布局输出的是一个"盒模型"对象,该对象包含了每个元素在视口内的确切位置和尺寸。 ? 4.绘制 在布局结束后,接下来就是绘制,实现栅格化。...线程的使用情况和代码中的资源的位置有很大关系,这个下面会介绍。 ? (2)时间线事件 Main线程中的图中,有一些细线条记录着一些事件的触发时间,光标放在上面就可以查看。...其中Scripting类型中有一种Event类型的事件,如下图中的Event(DOMCotentLoaded)可以在JS中被监听到,常用的还有readystatechange、pageshow、pagehide
作用域是定义视图的范围,从一个基本元素开始:例如,应用程序可能只想查找桌面的直接子元素,或者某个应用程序窗口的所有后代元素。过滤是定义要包含在视图中的元素类型。...GridPattern IGridProvider 用于支持网格功能(如调整大小和移动到指定单元格)的控件。...事件 说明 属性更改 当 UI 自动化元素上的某个属性或控件模式更改时引发。 例如,如果客户端需要监视应用程序的复选框控件,它可以注册来侦听 ToggleState 属性上的属性更改事件。...元素操作 当来自最终用户或编程活动的 UI 结果出现更改时引发;例如,单击或通过 InvokePattern 调用一个按钮。 结构更改 在 UI 自动化树的结构更改时引发。...当桌面上有新 UI 项变得可见、隐藏或删除时,结果便发生更改。 全局桌面更改 当与客户端相关的的全局操作发生时引发,例如当焦点从一个元素转换到另一个元素、或窗口关闭时。
虚拟列表原理 虚拟列表的核心步骤可以总结成五步: 不把长列表数据一次性全部直接渲染在页面上 截取长列表一部分数据用来填充可视区域 长列表数据不可视部分使用空白占位填充(下图中的startOffset和endOffset...区域) 监听滚动事件根据滚动位置动态改变可视列表 监听滚动事件根据滚动位置动态改变空白填充 固定高度 列表项高度固定的话,就无需每次都计算当前应该渲染多少条数据,视口的数据量始终是固定的,只需要通过用户滚动的距离...并且需要注意的是,不只是需要更新视图中的列表项,还需要更新之后的所有列表项 // 每次滚动,都去更新缓存数组中dom的高度和位置 useEffect( function () { ...positList[nodeID - 1].bottom : 0; // 更改一个节点就需要更改之后所有的值,不然会造成空白 for (let j = nodeID...值,所以这里我们比较其scrollTop的大小即可,并且数组中的列表项遵循从上往下排列,所以其top和bottom值必定也是线性变化的,所以这里我们可以使用二分查找来进行性能优化。
通过将 CSS 与 SVG 结合使用,我们可以根据用户交互更改 SVG 的外观。或者我们可以在多个地方使用同一个 SVG 文档,并根据视口的宽度显示或隐藏它的一部分。...SVG 元素的计算大小还取决于: 根 SVG 元素的计算width和height 根元素的viewBox属性值 应用于元素或其祖先的任何缩放变换 换句话说,我们的角元素是(20, 50),(...考虑一个徽标,例如下图中虚构的 Hexagon Web Design & Development 的徽标。 如果没有媒体查询,这个 SVG 标志会简单地拉伸或收缩以适应视口或其容器。...媒体查询在这两种情况下都适用,但是当 SVG 文档被链接时,它的视口独立于它的 HTML 文档。在这种情况下,浏览器窗口的大小不会决定 SVG 视口的大小。...不幸的是,这是 SVG 的一个限制。要修复它,我们需要更改viewBoxSVG 文档的属性,但仅当视口低于特定大小时。
传统的实现方法是,监听到scroll事件后,调用目标元素(绿色方块)的getBoundingClientRect()方法,得到它对应于视口左上角的坐标,再判断是否在视口之内。...这种方法的缺点是,由于scroll事件密集发生,计算量很大,容易造成性能问题。...()方法的返回值,如果没有根元素(即直接相对于视口滚动),则返回null boundingClientRect:目标元素的矩形区域的信息 intersectionRect:目标元素与视口(或根元素)的交叉区域的信息...intersectionRatio:目标元素的可见比例,即intersectionRect占boundingClientRect的比例,完全可见时为1,完全不可见时小于等于0 上图中,灰色的水平方框代表视口...后者定义根元素的margin,用来扩展或缩小rootBounds这个矩形的大小,从而影响intersectionRect交叉区域的大小。
容器查询 在 @container 之前,网页的元素只能响应整个视口的大小。这对于大型布局非常有用,但对于外部容器不是整个视口的小型布局,布局不可能进行相应调整。...、Wed、Thurs 和 Fri 列能够被事件元素查询。...但是当该条滑出时,视口高度发生了变化,任何 vh 单位都会随着目标大小的变化而移动和调整大小。...根据访问视口的大小,可以在页面加载上节省更多资源。当用户与媒体滚动条交互时,继续保存。这些图像上都有load="lazy"属性,再加上CSS完全隐藏元素,这意味着永远不会对图像发出网络请求。...自定义选择元素 在 之前,CSS 无法使用丰富的 HTML 自定义 元素或更改选项列表的显示方式。
"user-scalable=no"> 更改默认视口宽度...移动端浏览器默认视口宽度一般比设备浏览器视窗宽度大,通常是980px,我们可以通过如下标签设置视口宽度为设备宽度。...例如,你可以只去监听一个元素的 pointerdown事件,无需分别监听其 touchstart和mousedown事件。...Google 的 Polymer 微软的 HandJS @Rich-Harris 的 Points 为避免 300 毫秒点击延迟,我们主要关心这些 polyfill 是如何在非 IE 浏览器中模拟...更改默认视口宽度:简单,但需要浏览器支持。 指针事件和css touch-action:新属性,可能存在浏览器兼容问题,如仅为解决点击延迟问题儿引入一整套指针事件有点过了。
,如 getter、条件、引用同步等 Watch —更高级的观察者类型,如可暂停观察者、去抖动观察者和条件观察者 杂项(Misc)— 事件、WebSockets 和 Web Worker 的不同类型的功能...假设我们有一个自定义文本输入,它试图为其文本输入的值创建一个 v-model。通常,我们必须接受该值的 prop,然后发出更改事件以更新父组件中的数据值。...每当我们更改对象的值时,useVModel 都会向父组件发出更新事件。 这是父组件可能是什么样子的一个快速示例.........4、使用IntersectionObserver 跟踪元素可见性 在确定两个元素是否重叠时,Intersection Observers非常强大。一个很好的用例是检查元素当前是否在视口中可见。...该示例的代码可能看起来像这样,其中我们有一个虚拟段落,它只占用视口、目标元素中的空间。 Is target visible?
正文 什么是 CSS 容器查询 简单来说: 容器查询允许开发者根据容器元素的大小来设置元素的样式。 它类似于 @media查询,不同之处在于它根据容器的大小而不是视口的大小进行判断。...我们使用创建响应式设计时,通常使用媒体查询根据视口的大小来更改文档布局。 但是,许多设计都有一些通用组件,这些组件会根据其容器的可用宽度来更改布局。...这可能并不总是与视口的大小有关,而是与组件在布局中的放置位置有关。 例如,以下组件可能显示在网站布局的窄或宽列中。 如果有空间,它将显示为两列,否则,我们希望将其堆叠显示。...上图中的左右两个组件,是同一个组件,功能上是完全一样的,只是要展示不同的布局。...媒体查询使我们能够根据视口的范围来改变元素的大小。 当我们添加一个类或目标元素时,我们决定当对象在侧边栏中时,它必须使用堆叠布局。
领取专属 10元无门槛券
手把手带您无忧上云