使用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-布局：使用媒体查询，弹性框，引导程序等。