很久以前，所有其他浏览器都采用了它。 一些浏览器还返回height和width属性，尽管这是非标准的。 如果您担心与旧版浏览器的兼容性，请查看此答案的修订版以实现优化的降级实现。...如果您需要相对于另一个元素的矩形，只需从另一个矩形中减去一个矩形 例如以下代码： var bodyRect = document.body.getBoundingClientRect(), elemRect
流式布局（Liquid Layout） 为网页设置一个相对的宽度，页面元素的大小按照屏幕分辨率进行适配调整，但整体布局不变，通常以百分比做为长度单位（通常搭配 min-*、max-* 属性控制尺寸流动范围以免过大或者过小导致元素无法正常显示...改变屏幕分辨率可以切换调用相应的布局（页面元素位置发生改变而大小不变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。 ...弹性布局（rem/em布局） 弹性布局跟流布局很像，网页宽度不固定，使用 em 或 rem 单位进行相对布局，避免了使用像素 px 布局在高分辨率下几乎无法辨识的缺点，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示...但弹性布局也有局限性，如果不对这种布局设置一个最小宽度，当用户缩小窗口到足够小时会造成布局严重错位。 ...对于富媒体和复杂排版的支持非常大，但是存在兼容性问题。任何一个容器都可以指定为 flex 布局，行内元素也可以使用。
重绘 当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。...重排: 页面初始渲染 添加/删除可见DOM元素 改变元素位置 改变元素尺寸（宽、高、内外边距、边框等） 改变元素内容（文本或图片等） 改变窗口尺寸 减少重排 分离读写操作 样式集中改变 4）写出清除浮动的方法...区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。...这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。...PS：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。
结果是，大多数开发者只会为所有屏幕尺寸使用同一张图片，并让浏览器调整图片的大小以适应屏幕。这是一种不好的做法，因为浏览器仍会下载完整尺寸的图片（通常非常大），即使它只以其一部分尺寸显示。...尝试将浏览器大小调整为较小的尺寸，然后重新加载页面，您将看到下载了较小的图像。...如何处理不同的像素密度 有时候，您可能有一张图像在屏幕上始终保持相同的尺寸，但您希望它在高分辨率设备上看起来很好。...如果我们仅使用像上面那样的srcset，我们的图像将根据浏览器窗口的完整尺寸进行缩放，这将导致在大屏幕上图像比实际需要的要大。这就是sizes属性的用途。...这意味着，如果您通过缩放或调整窗口大小来更改屏幕尺寸，它将切换到正确的图像。 sizes属性的工作方式类似，但只适用于增大屏幕尺寸的情况。
改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。...1、布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。 2、设计方法：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。...——分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。...1、布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。 2、设计方法：媒体查询+流式布局。...移动端弹性布局流行起来的原因归根结底是rem单位对于（根据屏幕尺寸）调整页面的各元素的尺寸、文字大小时比较好用。
，提供更好的清晰度且与现代UI惯例保持一致。...其他方案元素也已更新，最值得注意的是滑块，它现在更加的明显。布局通过新的动态调色板，Cinema 4D中的布局可以适应当前的模式、对象或工具。...文档与布局标签页Cinema 4D窗口顶部以浏览器为灵感的新标签页，可轻松在打开的文档或关键布局之间切换。多显示器上的布局切换更可靠，切换分辨率时可以保持布局元素的宽度或高度。...直观的数字输入栏在Cinema 4D R25属性管理器中的数字输入栏现在可以作为虚拟滑块使用，只需在任何数字输入栏上点击并拖拽就可以交互式地调整数值。...将光标放在数字输入栏内，便可使用上下方向键来增减一个单位的数值，具体取决于闪烁的垂直光标的位置，因此您可以快速调整不同位数上的数值。
，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。.../TR/xhtml1/DTD/xhtml1-transitional.dtd"> 请调整浏览器窗口...meta http-equiv="content-type" content="text/html; charset=gb2312"> 请调整浏览器窗口大小...--显示浏览器窗口的实际尺寸--> 浏览器窗口 的 实际高度: 浏览器窗口 的 实际宽度: <input...（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。 （5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。
，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。.../TR/xhtml1/DTD/xhtml1-transitional.dtd"> 请调整浏览器窗口...http-equiv="content-type" content="text/html; charset=gb2312"> 请调整浏览器窗口大小...--显示浏览器窗口的实际尺寸--> 浏览器窗口 的 实际高度: 浏览器窗口 的 实际宽度:...（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。 （5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。
Cinema 4D 窗口顶部的受浏览器启发的新选项卡可以轻松地在打开的文档或键布局之间切换。多显示器布局切换更可靠，在切换分辨率的同时可以保持布局元素的宽度或高度。...更新的图标和方案更新的图标集为 Cinema 4D 的经典图标提供了现代风格，保持整体精神，同时减少颜色和复杂性以避免分心，并引入了一些新图标，这些图标提供更好的清晰度并符合现代 UI 惯例。...其他方案元素也已更新 - 最显着的是现在更加明显的滑块。动态调色板和更新的布局使用新的动态调色板，您在 Cinema 4D 中的布局可以适应当前的模式、对象或工具。...直观的数字字段Cinema 4D R25 属性管理器中的数字字段现在用作虚拟滑块 - 只需单击并拖动任何字段即可交互调整值。...将光标放在数字字段内可以使用向上和向下箭头键增加光标下的位置值 - 因此您可以快速调整百分之一或百。
例如，在平板电脑或大屏手机上，如果不完全调整握持姿势，人们可能很难触及屏幕的顶部区域，因此请将重要操作和内容放在容易触及的区域中。...△ 响应式界面可根据屏幕尺寸变化而调整内容布局 设想一下，当您调整浏览器窗口大小时，如果浏览器回退了一个页面，或者重定向到另一个页面，又或者修改了历史记录，这种体验非常奇怪。...如需构建响应式界面，我们应该优先考虑界面中长驻元素的位置，例如导航元素。遵循 Material 指南，我们可以根据宽度的尺寸类别提供替代布局，将导航调整到最方便使用的位置。...当然我们有很多方法可以实现这一点，但 ConstraintLayout 的灵活性最大，因为它提供了很多种方式来约束子元素的尺寸，以及相对于其他子元素的位置。...您可以做些调整，比如将支持面板置于一侧，或者在折叠的上半部分展示主页横幅。首先，我们需要知道内容视图在窗口中的位置，通过 getLocationInWindow 可以获取位置信息。
累积布局偏移（Cumulative Layout Shift，CLS）：衡量页面上元素位置发生变化的频率和程度。 测量「视觉稳定性」 为了提供良好的用户体验，页面的 CLS 应保持在 0.1....移动距离定义了「布局偏移前后给定元素的位置之间的距离」。它基本上回答了一个问题：「元素移动了多远」？...硬编码菜单和页眉 硬编码页眉和菜单元素可以导致页面布局更一致和稳定，因为页眉和菜单的位置和外观始终保持相同。...这样，浏览器就不需要在适当地调整大小上花费时间。然而，当无法提供精确尺寸的图像时，我们应为显示的每个图像设置宽度和高度属性。这样，用户的浏览器将准确知道图像的位置，而不需要在最后一刻调整布局。...当浏览器根据设备的屏幕大小和分辨率选择加载图像时，它会根据srcset属性和sizes属性的规则选择最合适的图像源，并自动调整图像的大小。
Window Resizer —调整浏览器窗口大小，模拟各种分辨率。帮助Web设计师和开发者测试多种分辨率下的布局效果。 WhatFont — 识别网页所使用的字体。...Page Ruler —获取任意网页中元素大小、位置信息。 Web Developer Checklist — 自己的网站是否符合Web设计、开发的最佳实践？...CSS Shapes Editor — 在所选中元素上方显示交互式编辑器，用于新建和调整用CSS写的图形。...Pesticide — 在当前网页插入Pesticide CSS，为元素添加明显的边框，方便查看元素位置。 Responsive Web Design Tester —测试移动网站在移动设备上的效果。...PerfectPixel — 在页面上显示半透明的图像，便于逐像素对比调整前后的页面效果，以达到最佳水准。
按照刚刚的理论，元素的宽度是元素的宽度的100%，我们又知道元素的宽度是浏览器窗口的宽度。...这样我们知道viewport实际上就是浏览器窗口，它的大小是由浏览器特性所决定的，一旦页面渲染完成，无所是缩放操作还是其他什么操作都不会让它变化。...layout viewport就是一个页面渲染之后具有固定大小的大框，跟之前提到PC上的概念相似，我们知道它的大小是由浏览器特性来决定的，在PC端就是等于窗口大小，但在移动端不同浏览器的值不同，比如Safari...当浏览器窗口缩小时，内容会被剪掉，实际上由于viewport的原因，这种固定大小的页面在移动端的展示也是很不友好的。...当浏览器宽度缩小，容器也跟着缩小，当设备屏幕较小时，体验也会好一点。
实际上，当用户关闭了浏览器之后，它们的挖矿活动将会停止，并影响攻击者的收益。 但是，我们近期发现了一种新型浏览器挖矿技术，而这种技术可在浏览器窗口关闭的情况下持续挖门罗币。...用户浏览完毕，关闭Chrome窗口。 CPU活动仍保持高占用率，因为挖矿活动仍在进行。...在这种技术中，虽然浏览器窗口已经被关闭，但还有一个隐藏窗口仍处于打开状态，因为恶意代码会创建一个浏览器窗口，并将其隐藏在任务栏右下角的时间后面，隐藏窗口会基于用户屏幕的分辨率来进行调整，适配规则如下：...水平位置= （当前屏幕 x分辨率） -100 垂直位置= （当前屏幕y分辨率） -40 如果Windows主题允许任务栏透明，那么细心的用户可能就会发现这个隐藏窗口了： 揭开“神秘面纱” 通过分析网络流量...，我们就可以了解到这种流氓浏览器窗口是从何而来的，并且知道它加载了哪些恶意内容。
devicePixelRatio: 返回当前显示设备的物理像素分辨率与CSS像素分辨率的比值。 document: 返回指向document对象的引用。...frames: 返回一个类数组对象，列出了当前窗口的所有直接子窗口。 fullScreen: 这个属性表明了窗口是否处于全屏模式下。 history: 提供了操作浏览器会话历史的接口。...pageXOffset: 设置或返回当前页面相对于窗口显示区左上角的X位置。 pageYOffset: 设置或返回当前页面相对于窗口显示区左上角的Y位置。...resizeBy(): 按照指定的像素调整open创建的窗口的大小。 resizeTo(): 把open创建的窗口的大小调整到指定的宽度和高度。 scroll(): 滚动窗口至文档中的特定位置。...onmessage: 窗口对象接收消息事件时触发。 onchange: 窗口内表单元素的内容改变时触发。 oninput: 窗口内表单元素获取用户输入时触发。
该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架或 。属性 frames.length 存放数组 frames[] 中含有的元素个数。...pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。 pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。 parent 返回父窗口。...resizeBy() 按照指定的像素调整窗口的大小。 resizeTo() 把窗口的大小调整到指定的宽度和高度。 scrollBy() 按照指定的像素值来滚动内容。...该集合是一个 Plugin 对象的数组，其中的元素代表浏览器已经安装的插件。Plug-in 对象提供的是有关插件的信息，其中包括它所支持的 MIME 类型的列表。...但是 Location 对象所能做的远远不止这些，它还能控制浏览器显示的文档的位置。
英寸和厘米的换算： 1英寸=2.54厘米 二、分辨率 2.1 像素 像素即一个小方块，它具有特定的位置和颜色。 图片、电子屏幕（手机、电脑）就是由无数个具有特定颜色和特定位置的小方块拼接而成。...布局视口( layout viewport)：当我们以百分比来指定一个元素的大小时，它的计算值是由这个元素的包含块计算而来的。当这个元素是最顶级的元素时，它就是基于布局视口来计算的。...所以，布局视口是网页布局的基准窗口，在 PC浏览器上，布局视口就等于当前浏览器的窗口大小（不包括 borders 、 margins、滚动条）。...例如：用户将浏览器窗口放大了 200%，这时浏览器窗口中的 CSS像素会随着视觉视口的放大而放大，这时一个 CSS像素会跨越更多的物理像素。...window.outerHeight：获取浏览器窗口外部的高度。表示整个浏览器窗口的高度，包括侧边栏、窗口镶边和调正窗口大小的边框。
其次，许多下游视觉任务，如目标检测和语义分割，需要高分辨率的输入图像或大的注意力窗口。低分辨率预训练和高分辨率微调之间的窗口大小变化可能相当大。...d是query, key 的维度， 是窗口中的patch数。相对位置偏差计算视觉元素的相对空间配置，并在各种视觉任务中显示出其关键性，特别是对于密集识别任务，如目标检测。...Log-spaced coordinates 当在很大程度上改变窗口大小时，将有很大一部分相对坐标范围需要外推。...；以及对数间隔连续相对位置偏差 方法，该方法可使模型更有效地跨窗口分辨率传输。...经过调整的结构名为Swin Transformer V2，通过扩展容量和分辨率，它可以在多个数据集上达到SOTA的结果。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
