这段代码在本质上做了这样几件事情：先把这个元素的左上角放置在视口(或最近的、具有定位属性的祖先元素)的正中心，然后再利用负外边距把它向左、向上移动(移动距离相当于它自身宽高的一半)，从而把元素的正中心放置在视口的正中心...在通常情况下，对那些需要居中的元素来说，其尺寸往往是由其内容来决定的。如果能找到一个属性的百分比值以元素自身的宽高作为解析基准，那我们的难题就迎刃而解了!...不过幸运的是，如果只是想把元素相对于视口进行居中，仍然是有希望的。CSS值与单位(第三版)定义了一套新的单位，称为视口相关的长度单位。 1) vw 是与视口宽度相关的。...与常人的直觉不符的是，1vw 实际上表示视口宽度的 1%，而不是 100%。 2) 与 vw 类似，1vh 表示视口高度的 1%。 ...3) 当视口宽度小于高度时，1vmin 等于 1vw，否则等于 1vh。 4) 当视口宽度大于高度时，1vmax 等于 1vw，否则等于 1vh。
调整元素的大小是一个重要的技能，CSS 提供了多种方法来控制和调整元素的尺寸，以适应不同的设计需求和屏幕尺寸。...一、原始尺寸（或固有尺寸） 原始尺寸，通常称为固有尺寸，是指元素在未进行任何 CSS 样式调整时的默认大小。这种尺寸由元素的内容、内边距、边框和外边距等因素决定。...例如，一个图片元素的固有尺寸由图片本身的实际像素决定，而一个文本块的固有尺寸则由文本内容和字体大小决定。 示例 : 图片的固有尺寸 视口宽度如何变化，.box 的宽度都在这两个值之间调整。 六、视口单位 视口单位（vw 和 vh）用于根据视口的尺寸来设置元素的尺寸。...vw 表示视口宽度的百分比，vh 表示视口高度的百分比。这种方法非常适合创建全屏背景或响应式布局。 示例 : 使用视口单位 <!
翻译一下： 大视口（Large Viewport）：视口大小假设任何动态扩展和缩回的 UA 界面都没有展开 小视口（Small Viewport）：视口大小假设任何动态扩展和缩回的 UA 界面都展开了...简单而言，动态视口的意思是： 动态工具栏展开时，动态视口等于小视口的大小 当动态工具栏被缩回时，动态视口等于大视口的大小 因此，也就能得到下面这张图： 其中，dvh、dvw、dvmax、dvmin 对标...其实，在之前也有 vi 和 vb 两个单位： vi：vi 代表 Viewport Inline，代表文档的内联方向。在水平书写方向上，这对应于视口的宽度，而在垂直书写方向上，这表示视口的高度。...这与 vi 水平书写方向相反，这将对应于视口高度，而在垂直文档中，这将表示视口的宽度。 因此，vi 和 vb 属于两个逻辑单位。...1cqh 等于容器高度的 1% 容器查询：它给予了 CSS，在不改变浏览器视口宽度的前提下，只是根据容器的宽度变化，对布局做成调整的能力。
「使用值」是浏览器进行最终调整和转换后的属性值。在此过程中，相对单位会转换为绝对单位。对于有屏幕的媒体（即有屏幕的设备），物理单位会转换为等效的像素单位。...它们是相对于初始包含块的大小计算的，如果是分页媒体，则是视口或页面。一个视口百分比单位等于初始包含块的 1%。这与百分比不同，百分比将尺寸设置为父元素宽度或高度的一定比例。...如果使用 svw 或 svi 单位来确定元素的大小，那么当浏览器界面缩回时，元素的大小不会扩大。反之，如果使用 lvh 或 lvb 单位，部分内容可能会在浏览器控件展开时被隐藏。...另一方面，动态视口尺寸并不稳定。当方向改变或用户滚动时，它们可能会改变。例如，当浏览器界面影响视口大小时，高度值为 100dvmax 的元素就会改变大小。...容器相对单位 视口相对单位适用于浏览器窗口的可用空间，而容器相对单位则是相对于元素的包含上下文的大小来计算的。
：主要是相对于视口viewport的百分比。...视口是浏览器中用于呈现网页的区域，移动端的视口通常指的是布局视口。...vw : 1vw 等于视口宽度的 1% vh : 1vh 等于视口高度的 1% vmin : 选取 vw 和 vh 中最小的那个 vmax : 选取 vw 和 vh 中最大的那个...，视口单位依赖于视口的尺寸 "1vw ＝ 1/100 viewport width"，根据 视口尺寸的百分比来定义元素宽度 vh/vw 布局缺点 存在一些兼容性问题，Android 4.4 以下不支持...将 vw/vh 方案与 rem 方案相结合，给根元素设置随视口变化的vw单位。
2.3、初步优化方案 为了解决纵向适配问题，我们将页面内容分为背景图和内部元素两部分，并针对性的进行属性调整，初步可以解决问题。...2.1.1、元素分类 将元素分类为 主要元素 和 次要元素： 主要元素 页面中需要突出的重点内容，在视口尺寸发生变化引起的空间竞争中，处于优势地位； 次要元素 页面中相对不重点的内容，在视口尺寸发生变化引起的空间竞争中...2.1.3、实际视口中的元素缩放行为 当实际视口短于基准视口，主要元素大小与基准视口保持不变，次要元素按视口比例缩小； 当实际视口长于基准视口，主要元素按视口比例放大，次要元素大小与基准视口保持不变。...2.2.2、吸附性 对于一个元素，可以预设其锚点吸附于视口的顶部/底部，左边/右边，具体规则如下： 元素在水平方向或垂直方向上，不能同时吸附对应的两条边；比如不能令一个元素同时吸附视口顶部和视口底部；但是可以另其同时吸附视口顶部和视口左边...若元素在水平或垂直方向上，并不吸附于任意一条边，则令其相对于该方向上的两条边的距离比例固定；比如若元素同时不吸附于视口左边和右边，则元素相对于视口左边和右边的距离之比固定，值为在页面设计器中，配置页面时该元素距离视口左边和右边的距离之比
它们的好处在于为我们提供了一种不需要使用J avaScript 就能以动态的方式调整大小的方法。而且，如果它失效，也有很多备用方案。...例如，我们可以将以下内容用作文章标题： .title { font-size: 5vw; } 标题的font-size将根据视口宽度增加或缩小。 就像提供的字体大小是视口宽度的5％一样。...此外，我们添加了一些flexbox来处理水平和垂直居中的内容。 事例源码：https://codepen.io/shadeed/pe......从容器中挣脱出来 我注意到一个用例最适合编辑版面。 一个子元素，即使父元素的宽度受到限制，它也会占据视口100％的宽度。 考虑下面： ?...垂直和水平间距 我想到的另一个有趣的用例是使用视口单位来表示元素之间的间距。这可以与margin、top、bottom和grid-gap等值一起使用。
：主要是相对于视口viewport的百分比。...视口是浏览器中用于呈现网页的区域，移动端的视口通常指的是布局视口。...vw : 1vw 等于视口宽度的 1% vh : 1vh 等于视口高度的 1% vmin : 选取 vw 和 vh 中最小的那个 vmax : 选取 vw 和 vh 中最大的那个 计算方式实际上与百分基本一致...，不过多了一个优势，就是参照系没有百分比那么复杂 vh/vw 布局优点 纯 CSS 移动端适配方案，不存在脚本依赖问题 相对于 rem 以根元素字体大小的倍数定义元素大小，逻辑清晰简单，视口单位依赖于视口的尺寸...将 vw/vh 方案与 rem 方案相结合，给根元素设置随视口变化的vw单位。
客户区大小指的是元素内容及其内边距所占空间的大小。...（标准模式） document.body.clientWidth和document.clientHeight（混杂模式） 取得视口大小的跨浏览器的解决方案： var pageWidth=window.innerWidth...就是指包含滚动内容的元素大小。...像textarea、html这些元素，当内容超过所设置的宽高后，就会出现一个滚动条，滚动大小的计算差不多就是指把元素内容平铺后的大小。...right和bottom，给出了元素在页面中相对于视口的位置 ①由于ie8及更早版本认为文档的左上角坐标是(2,2)，而其他浏览器包括ie9则将(0,0)作为起点坐标，所以用函数使用它自身的属性来确定是否要对坐标进行调整
editors=1100 装饰元素 如果你需要在部分项目中添加装饰元素，大多数时候，元素需要响应，并且可能需要根据视口大小进行不同的定位，你会怎么做？ 如下示例效果： 两侧有两个装饰元素。...editors=1100 流体英雄高度 与前面的示例相关，英雄部分的高度可以根据视口大小而不同。因此，我们倾向于通过媒体查询或使用视口单元来改变它。....hero { min-height: clamp(250px, 50vmax, 500px); } 调整屏幕大小时，你会注意到高度会根据视口宽度逐渐变化。...9999 是一个很大的数字，强制该值为 0px 或 8px。 有了上面的内容，当卡片占据整个视口宽度时，它的半径为零，或者在更大的屏幕上为 8px。...，我们后面将会详细介绍，今天的内容就先分享到这里，感谢你的阅读。
一致垂直节奏 通用选择器 ( *) 跟元素一起使用，可以保持一致的垂直节奏： .intro > * { margin-bottom: 1.25rem;} 一致的垂直节奏可以提供视觉美感，增强内容的可读性...与视口宽度无关，子元素的div将保持其宽高比（100％/ 20％= 5:1）。...；用 em 来调整局部大小 在根元素设置基本字体大小后 ( html { font-size: 100%; }), 使用 em 设置文本元素的字体大小: h2 { font-size: 2em;}p...使用选择器 :root来控制字体弹性 在响应式布局中，字体大小应需要根据不同的视口进行调整。...你可以计算字体大小根据视口高度的字体大小和宽度，这时需要用到 :root: :root { font-size: calc(1vw + 1vh + .5vmin);} 现在，您可以使用 root em
绝对长度单位总是相同的，而不是基于页面中的其他内容 相对长度单位单位可以改变，并基于字体和视口 如何确定何时使用绝对或相对 CSS 单位？...对于 font-size 属性使用 rem 单位是最佳实践，因为它允许用户通过个人设备上的设置来自定义他们的浏览体验 相对长度单位也常用于根据用户的视口尺寸改变页面外观。...增加文字大小设置 调整浏览器窗口大小 放大或缩小页面 使用移动设备阅读 在所有这些情况下，用户最关心的是什么？是内容，还是内容之间的间距？这两点中哪一点对理解网页至关重要？...就垂直间距而言，最终也会增加用户完成任务的难度。由于水平空间有限，文字必须换行到下一行，对此你无能为力，但你也不想让页面变得更高，因为你的垂直间距会随着文字大小的增加而增加。...这样做的目的是将网站使用的基本字体大小加倍，因为网站使用 rem 单位来实际调整文字大小。 遗憾的是，在大多数元素中，它们还将 rem 单位用于 margin 和 padding 中。
2.1 PC端视口 PC端视口的大小跟浏览器的可视区的宽高保持1：1固定比例对应。也就是说浏览器改变宽高，视口跟着改变。...由于移动端的视口可以进行放大、缩小、改变宽高，所以造成了视口的大小跟屏幕能显示的内容的宽度和布局的宽度不一致，这就出现两个概念：布局视口和视觉视口。...(ideal viewport) 所谓的理想视口是： 第一，不需要用户缩放和横向滚动条就能正常的查看网站的所有内容； 第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清...看一图就明了： 普通屏幕 两倍屏 视觉视口：当页面手动放大的时候，用户可以看到的网页内容减少，视觉视口的尺寸变小。反之，同理不赘述。...name="viewport" content="initial-scale=1,maximum-scale=5" /> 假设页面的默认缩放值initial-scale是1，那么用户最终能够将页面放大到这个初始页面大小的
当用户对浏览器进行缩放时，不会改变布局视口的大小，所以页面布局是不变的，但是缩放会改变视觉视口的大小。...布局视口在移动端展示的效果并不是一个理想的效果，所以理想视口( ideal viewport)就诞生了：网站页面在移动端展示的理想大小。...4.6 缩放 上面提到 width可以决定布局视口的宽度，实际上它并不是布局视口的唯一决定性因素，设置 initial-scale也有肯能影响到布局视口，因为布局视口宽度取的是 width和视觉视口宽度的最大值...4.7 获取浏览器大小 浏览器为我们提供的获取窗口大小的 API有很多，下面我们再来对比一下： ? window.innerHeight：获取浏览器视觉视口高度（包括垂直滚动条）。...下面的代码可以保证在页面大小变化时，布局可以自适应，当触发了 window的 resize和 pageShow事件之后自动调整 html的 fontSize大小。
2.1 PC端视口 PC端视口的大小跟浏览器的可视区的宽高保持1：1固定比例对应。也就是说浏览器改变宽高，视口跟着改变。...由于移动端的视口可以进行放大、缩小、改变宽高，所以造成了视口的大小跟屏幕能显示的内容的宽度和布局的宽度不一致，这就出现两个概念：布局视口和视觉视口。...(ideal viewport) 所谓的理想视口是： 第一，不需要用户缩放和横向滚动条就能正常的查看网站的所有内容； 第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清...视觉视口：当页面手动放大的时候，用户可以看到的网页内容减少，视觉视口的尺寸变小。反之，同理不赘述。...name="viewport" content="initial-scale=1,maximum-scale=5" /> 假设页面的默认缩放值initial-scale是1，那么用户最终能够将页面放大到这个初始页面大小的
一、视口 ---- 浏览器 显示 网页页面内容 的 屏幕区域 被称为 " 视口 " ; 视口分为以下几个大类 : 布局视口 视觉视口 理想视口 上面的视口 , 只需要关注 理想视口 即可 ; 1、布局视口...它是指 网页中可见部分的大小，即浏览器窗口中显示的内容大小。 在移动设备上，由于屏幕较小，需要 对网页进行缩放以适应屏幕大小，因此布局视口也需要进行调整。...为了 使网页在 不同设备上 都能够 正确地显示和布局，开发者可以使用 响应式设计来根据设备的不同调整布局视口。..., 压缩到手机屏幕宽度 , 网页中的元素被缩小了 , 用户只能通过手指缩放查看网页内容 ; 2、视觉视口 ( 设备大小 | 网页大小 > 设备大小 ) 视觉视口 - Visual Viewport...理想视口的大小 取决于 网页的内容和布局，通常应该 与布局视口的大小相同 。 通过设置理想视口，可以 使网页在不同设备上具有相同的布局和显示效果，无需进行缩放和滚动。
属性可以获取或设置一个元素的内容垂直滚动的像素数....Element.getBoundingClientRect 用法讲解 Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。...除了 width 和 height 以外的属性是相对于视图窗口的左上角来计算的。 width和height是计算元素的大小，其他属性都是相对于视口左上角来说的。...当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top 和 left 属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的） 。...计算元素是否出现在视口内 利用的还是元素距离视口的位置小于视口的大小。 注意即便变成了负值，那么也表示元素曾经出现过在屏幕中只是现在不显示了而已。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
