uni-app横竖屏切换屏幕适配方案与vmin

luoye呀
3,454 阅读5分钟

参考资料

在某些业务场景中，需要固定屏幕方向，比如横屏或者竖屏，这种固定又和设计尺寸不一致，通常而言，我们在UNI开发中的单位的rpx,但是rpx是一种动态百分百方案。

正文

所以我们需要一个在任何时候都保持不动的定位参数，作为屏幕适配方案的标准系数。

css中的vmin和vmax应该如何理解

在 CSS 中，vmin 和 vmax 是两种相对长度单位，它们基于视口的尺寸（即浏览器窗口或包含元素的尺寸）来确定长度。这些单位对于响应式设计特别有用，因为它们允许元素的大小根据视口的尺寸动态地调整。

下表中的数字表示支持该长度单位的最低浏览器版本。

长度单位ChromeIEFirefoxSafariOpera
em, ex, %, px, cm, mm, in, pt, pc1.03.01.01.03.5
ch27.09.01.07.020.0
rem4.09.03.64.111.6
vh, vw20.09.019.06.020.0
vmin20.09.0*19.06.020.0
vmax26.0不支持19.0不支持20.0

注意: Internet Explorer 9 通过不标准的名称 vm 来支持 vmin 。

表格数据来源

vmin

vmin 单位是基于视口的较小尺寸（宽度或高度中较小的那个）的 1% 来计算的。具体地说，如果视口的宽度小于其高度，则 1vmin 将等于视口宽度的 1%。反之，如果视口的高度小于其宽度，则 1vmin 将等于视口高度的 1%。

vmax

vmax 单位与 vmin 相反，它是基于视口的较大尺寸（宽度或高度中较大的那个）的 1% 来计算的。同样地，如果视口的宽度大于其高度，则 1vmax 将等于视口宽度的 1%。如果视口的高度大于其宽度，则 1vmax 将等于视口高度的 1%。

示例

假设你有一个视口，其宽度为 500px，高度为 1000px。

  • 在这个视口中，1vmin 将等于 5px（因为宽度是较小的尺寸，其 1% 是 5px）。
  • 同时，1vmax 将等于 10px（因为高度是较大的尺寸，其 1% 是 10px）。

响应式设计中的应用

这些单位在创建能够根据视口尺寸动态调整大小的元素时非常有用。例如，你可能希望一个元素的字体大小或宽度在较小的设备上变小，以便更好地适应屏幕。通过使用 vmin 或 vmax 单位，你可以确保元素的大小始终与视口的尺寸成比例。 然而，需要注意的是，由于这些单位是基于视口的尺寸来计算的，因此它们可能不会在所有情况下都产生预期的效果。例如，在具有固定宽度或高度的容器中使用这些单位可能会导致元素的大小在容器内部溢出或不足。因此，在使用这些单位时，最好进行一些测试以确保它们在各种设备和屏幕尺寸上都能正常工作。

rpx 的计算方式

在 uni-app 工程中，rpx（responsive pixel）是一个响应式像素单位，它可以根据屏幕宽度自适应调整大小。uni-app 默认以屏幕宽度为 750rpx 作为基准宽度设计，也就是说，在屏幕宽度为 750 的设备上，1rpx 就等于 1 物理像素。 当屏幕从竖屏切换到横屏时，屏幕的宽度会发生变化，而高度会相应地减小。由于 rpx 是根据屏幕宽度来计算的，所以屏幕宽度的变化会直接影响 rpx 的实际显示效果。 具体来说，当屏幕变宽时，由于 rpx 的计算是基于新的屏幕宽度，所以相对于之前的竖屏状态，rpx 所代表的实际物理像素会变大，从而导致元素在视觉上看起来变大。相反，当屏幕变窄时，rpx 所代表的实际物理像素会变小，元素在视觉上看起来会变小。 这就是为什么在 uni-app 工程中，屏幕横竖屏切换后 rpx 会变大或变小的原因。为了解决这个问题，你可以考虑使用其他单位来适应不同的屏幕尺寸，比如 vmin 或 vmax，这些单位可以根据视口的宽度和高度来动态调整元素的大小。然而，需要注意的是，这些单位也可能在某些情况下产生不可预测的效果，所以最好在使用之前进行充分的测试和验证。 参考资料

sass 中@function 和@mixin 的区别是什么

@funciton参考资料 sass中文文档

在 SaSS（Sass 的新语法）中，@function 和 @mixin 是两个不同的指令，它们各自有不同的用途和语法。下面是它们之间的主要区别：

1. 功能和用途

  • @function：用于定义返回单个值的 SassScript 函数。这些函数通常用于复杂的计算、值转换或逻辑判断。它们返回的值可以在其他 SassScript 表达式中使用，包括在 @mixin 和 CSS 声明中。

  • @mixin：用于定义可重用的样式块。@mixin 可以包含一组 CSS 声明，并接受参数。你可以在你的样式表中多次调用同一个 @mixin，并传递不同的参数来生成不同的样式。

2. 语法和调用

  • @function 语法示例：

    @function em-size($pixels, $base-font-size: 16px) {
  @return $pixels / $base-font-size * 1em;
}

// 调用函数
.my-element {
  font-size: em-size(24px);
}

  • @mixin 语法示例：

    @mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

// 调用 mixin
.my-button {
  @include border-radius(10px);
}

3. 返回值

  • @function 返回一个值，这个值可以是一个数字、颜色、字符串、布尔值、列表、映射等 SassScript 支持的类型。
  • @mixin 不直接返回值。它定义的是一组样式声明，这些声明会在包含 @include 的选择器上应用。

4. 使用场景

  • @function 通常用于需要计算或转换值的场景，比如从像素值转换到 em 值，或者计算一个动态的颜色值。
  • @mixin 通常用于定义一组可重用的样式规则，比如一个具有特定边框、内边距和背景色的按钮样式。

5. 嵌套

  • @function 可以在其他 SassScript 表达式中嵌套调用。
  • @mixin 可以在其他 @mixin 中嵌套调用，但通常不会直接嵌套在 CSS 声明中（除非通过 @content 指令在 @mixin 中使用 @at-root）。

总结

@function 和 @mixin 都是 Sass 提供的强大工具，用于编写可维护和可重用的代码。选择使用哪一个取决于你的具体需求：如果你需要计算或转换值，那么使用 @function；如果你需要定义一组可重用的样式规则，那么使用 @mixin。

使用vmin进行屏幕适配

通过上面的资料。我们可以知道，vmin 是屏幕最窄的那边，屏幕旋转后rpx 会重新计算，那么就不是我们想要的效果了。所以我们需要一种替代方案，那就是 vmin。

vmin与rpx 的相互转换

我们知道vmin 的定义里面：

vmin 单位是基于视口的较小尺寸（宽度或高度中较小的那个）的 1% 来计算的。具体地说，如果视口的宽度小于其高度，则 1vmin 将等于视口宽度的 1%。反之，如果视口的高度小于其宽度，则 1vmin 将等于视口高度的 1%。

通常来说，这个值的取值范围是0到100。但是我们设计稿提供的尺寸往往不是0到100，可能是750px 进行屏幕适配的。总不能我们手动计算嘛。因为css 中不支持直接计算，而uni 又支持scss,恰巧，scss 中支持类似于函数的东西@function.

所以我们转换代码可以写成：

<style lang="scss" scoped>
	@function tovmin($rpx) {
		//$rpx为需要转换的字号
		@return #{$rpx * 100 / 750}vmin;
	}
</style>

使用：

<style lang="scss" scoped>
  .two {
    width: tovmin(1500);
    height: tovmin(80);
    background-color:red;
  }
 </style>
avatar
文章
阅读
粉丝