使用vh和vw为网站上的每个元素应用填充，边距，宽度和高度是一种好习惯

Question

我对在角度/离子应用中使用vw和vh有一个一般性问题。根据高级团队成员的建议，我们使用以下逻辑来计算vh和vw中的边距/填充值。屏幕使用zeplin上的360 * 640尺寸设计。

$screen-height: 640;
$screen-width: 360;
@function viewport-height($element) {
  @return ($element/$screen-height * 100vh);
}

//funtion to calculate element viewport width
@function viewport-width($element) {
  @return ($element/$screen-width * 100vw);
}

下面的逻辑在需要分别添加边距/填充时使用。

.top-margin{
    margin-top:viewport-height(40);//40 px margin is as per the zeplin design
}

.left padding{
padding-left:viewport-width(15);//15 px left padding is as per the zeplin design
}

我有以下查询。

1. 使用这种逻辑使布局具有响应性是一种好习惯吗？如我所见，流行的网站使用基于像素的尺寸？
2. 可以用于字体大小吗？
3. 此逻辑可以创建的任何可能的问题。

Answer 1

像素是静态值，可以在某些尺寸下使用，但会在不同尺寸/视图（移动桌面）上引起问题并阻碍设计

对于响应式网页设计，必须遵循某些设计规范：

1-无捏缩放：通过正确应用视口解决。2-无水平滚动：通过使用相对大小和位置而不是绝对位置来解决。3-字体大小处理：使用em和rems而不是像素。4-布局：使用媒体查询，Flexbox，引导程序等。