常用 CSS

文本超出显示省略号：

white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏溢出的文本 */
text-overflow: ellipsis; /* 显示省略号 */

css 禁止页面伸缩效果

overscroll-behavior: none;

禁止触摸手势缩放

touch-action: pan-x pan-y; /* 仅允许水平和垂直滚动，阻止双指缩放 */

CSS 单位

css 单位 MDN

• vh： 代表视口初始 包含块 高度的百分比。1vh 是视口高度的 1%。例如：如果视口高度为 300px，那么属性上的 70vh 值就 210px
  对于 小、大和动态视口尺寸，视口百分比单位分别是 svh、lvh 和 dvh 表示基于浏览器默认视口尺寸的视口百分比长度。

• vw: 代表视口初始 包含块 宽度的百分比。1vw 是视口宽度的 1%。例如：如果视口宽度为 800px, 那么属性上的 50vw 值就是 400px
  对于 小、大和动态视口尺寸，视口百分比单位分别是 svw、lvw 和 dvw 表示基于浏览器默认视口尺寸的视口百分比长度。

传统的 vw 和 vh 单位是基于视口的宽度和高度的百分比，然而在实际的移动设备上，当用户滚动页面时，浏览器的地址栏和工具栏可能会自动隐藏和显示，这会导致实际可用的视口高度发生变化。传统的 vh 单位通常不会动态的适应这种变化，这可能导致 100vh 的元素在工具栏显示时，超出屏幕，或者在工具栏隐藏时，留下空白。 为了解决这个问题，css 引入了三种新的视口状态：

• 大视口 （large viewport）

  • lvh: large viewport height
  • lvw: large viewport width
  • 使用场景：当希望元素尽可能的占据大的空间，不会被浏览器的 UI 遮挡的时候。（占满全部背景的背景图）

• 小视口 （small viewport）

  • svh: small viewport height
  • svw: small viewport width
  • 使用场景：当希望元素尽可能的占据小的空间，即使浏览器 UI 完全展开时也不会被遮挡。 例如，一个需要完全可见的固定底部导航栏或弹出窗口。

• 动态视口 （dynamic viewport）

  • dvh: dynamic viewport height
  • dvw: dynamic viewport width
  • 使用场景：当希望元素能够动态适应浏览器视口宽度/高度的时候。 例如：一个始终需要占满视口剩余空间的元素。