24个关于设备视窗口的 CSS 单位

更新日期: 2022-09-01阅读: 1.1k标签: 窗口

过去css 有 4 个你必须知道的识别视窗口的单位,并且它们能够很好地处理每个可以想象的用例。然而,随着时间的推移和时代的变化,这 4 种视口单位现在不足以解决所有用例。于是,CSS 提供了 20 个更大的视窗口单位,以适应时代技术的发展需要,因此,总共为24个视窗单位,看起来感觉很多,但是,它们可能被分解为 6 个主要的视口设备,并带有 3 个精确的辅助单位,从而实现了 24 种组合。

在本文中,我会分解为6个主要视口小工具和 3 个精准单位中的每一个,以便你可以在所有情况下使用视口小工具。


原始的4个视口单位

之前CSS 的主要视窗口单位有 vw、vh、vmin 和 vmax。你可能已经习惯使用这些单位,因此,我将在解释它们时尽量简短。

vw 代表视口宽度,代表视口宽度的百分比。比 vw 更早的范围是这个时期的视口宽度。

例如,如果你写了 10vw,那么,这将构成视口宽度的 10% 的周期。

视口只是屏幕比例的一个精心设计的短语,因此,如果你使用的是宽度为 1920 像素的大型计算机设备,则 10vw 就是 192 像素。

如果你使用的是宽度为 300 像素的手机,那么 10vw 刚好是 30 像素。

Vh 代表视口高度,与 vw 完全相同,但代表高度值而不是宽度。这些小工具可以一起使用,以使细节填满屏幕的整个长度。


两个新的视口单位

CSS 一直在寻求从严格的顶部/底部、左/右、高度/宽度版本过渡到一个额外的动态开始/结束、块/内联版本。进行此修改的最重要原因是降低对你的代码执行非凡的编写指南的难度。

如果你的整个软件从水平写入路径切换到垂直写入路径,那么顶部/底部或宽度/高度的概念并不总是意味着相同的元素,因为如果你希望在你的上方和下方添加填充文本内容这将被表示为在垂直书写机器中向左和向右的填充,而不是填充顶点和底部。这就是 CSS 带来 vi 和 vb 视口单元的原因。

vi 代表 Viewport Inline,代表文档的内联方向。在水平书写方向上,这对应于视口的宽度,而在垂直书写方向上,这表示视口的高度。

记住 inline 方向的简单方法是记住它与文本的方向相同。另一种记住这一点的方法是,如果你有两个彼此相邻的内联元素(例如两个跨度),那么它们堆叠的方向就是你的内联方向。

vb 代表 Viewport Block,代表文件的块路径。这是 vi 的另一个,因此在水平写入路径中,这可以对应于视口顶部,而在垂直文件中,这可以构成视口的宽度。

如果你不想忘记这个单元,请不要忘记块路由将始终是块元素(作为实例 div)将堆叠在另一个顶点上的路由。


视口单位修改器

因此,我们已经涵盖了6种主要类型的视口设备,但是,你可以将 3 种出色的修改器上传到设备上,以使它们在你的视口可以改变大小的同时以其他方式表现。

例如,当你使用蜂窝智能手机上网时,你可以观察到 URL 栏会在你向下滚动时消失。当这种情况发生时,你的视口在技术上会修改长度,考虑到现在 URL 栏现在不占用你的视口的一部分。现代 CSS 设备没有任何方式来应对视口长度的这种变化,这就是添加这些修饰符的原因。

这些修饰符是 s、l 和 d。为了应用修改器,你只需要将修改器放在品种之后且早于 10svw 之类的单位。这为 6 个视口单元中的每一个提供了四种通用混合模式:

  •  vw
  •  svw
  •  lvw
  •  dvw.

因此,我们在本文中保护的整个距离都没有使用完全有效的修饰符。当你在单元上不操作任何修饰符时,包括 10vw 或 10vh,浏览器通常会默认使用三个修饰符之一,主要完全基于浏览器的实现。

S Modifier:

s 修饰符代表 Small 并且代表最小的可行视口。在我们的 cell telecellsmartphone 实例中,这将是显示 URL 栏时视口的长度。如果你将细节设置为 100svh,它将占据显示峰值的 100%,这主要完全取决于显示 URL 栏时的显示尺寸。如果看到 URL 栏,它现在不再计算,或者现在该单元不再将其长度始终基于 URL 栏显示时可能的视口长度。

l Modifier:

l Modifier代表Large,代表最大的可行视口。这是 s 修饰符的很多替代品。在我们的蜂窝 Telecellsmartphone 实例中,这将是视口的长度,而 URL 栏不显示。如果你将细节设置为 100lvh,它将吸收 100% 的显示峰值,主要完全基于显示的比例,而 URL 栏不显示。如果看到 URL 栏,它现在不再计数,或者如果 URL 栏不显示,这个单元将不再根据视口的长度持续计算它的长度,这意味着如果您将细节设置为 100lvh 并且 URL条正在显示它在技术上将比显示器大。

D Modifier

d Modifier代表动态,代表当前视口长度。这是 s 和 l 修饰符的集合。在我们的手机实例中,这通常是当前视口的尺寸,无论 URL 栏是否显示。如果我们的 URL 栏正在显示,则 d 修饰符是等长的,因为 s 修饰符,而如果 URL 栏没有显示,d 修饰符是等长的,因为 l 修饰符。

在显示和隐藏 URL 栏之间的过渡期间,此单元将动态缩放大小,因此它始终会填满所有可用空间。如果你需要保证元素始终根据视口调整大小但可能会很费力,因为随着大小的不断变化,它会导致大量重绘。

虽然 24 个视口单位,可能感觉很多,但把它们拆分为 6 个加 3 个修饰符的话,你就会觉得这一切都非常简单。然而,这些简单的组合为我们构建理想的 CSS 布局提供了强大的能量,希望这个内容对你学习CSS有所帮助。

来源: web前端开发

链接: https://www.fly63.com/article/detial/12072

H5解决浏览器,微信背景的上下滑动问题,脱离窗口的js局部滚动解决方法

当我们使用手机浏览器或微信浏览器打开Html网页的时候,如果上下滑动页面,页面就会出现黑色的空白(如图所示)。那么如何解决滑动的时候如何避免出界,出现头部和底部的黑底?

项目中打开新窗口的3种方式

使用iframe(注意Iframe的高度默认150px,如果要改变iframe的高度,只能设置成具体的像素值,不能是百分比,使用window.open()直接打开外部窗口,在外部窗口中处理完成所有的操作后回到原来的页面,原来的页面出现一个确认是否完成操作的弹框。点击确认或者“cancel”之后接着调用其他的接口。

实现a元素href URL链接自动刷新或新窗口打开

希望实现这样一个功能:点击一个链接,如果这个链接浏览器已经打开过,则刷新已经打开的链接窗口;如果这个链接没有打开过,则使用新窗口打开这个链接页面。这是一个非常好的体验增强功能

js关闭浏览器窗口的实现方式

这篇文章主要介绍:js关闭当前页面(窗口)的实现方法。我需要在网页上创建一个按钮,用户点击:提示是否关闭浏览器(窗口),如果用户点击“是”,关闭该页面,如果“否”,则什么也不做。

不同窗口通信(多窗口联动)_BroadcastChannel API

目前现代浏览器(支持最新ES标准)前端通信有PostMessage和Boradcast Channel两种消息机制。这里介绍Broadcast Channel API , 它可以实现同 源 下浏览器不同窗口、Tab 页、frame 或者 iframe 下的 浏览器上下文 (通常是同一个网站下不同的页面) 之间的简单通讯。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!