在无花果（或Photoshop）中有一个设计，每个页面都有3个布局（Desktop 1920，Tablet 834和Mobile 320）。
我们必须通过代表相应的屏幕大小的布局进行像素完美的HTML编码，并为中间屏幕尺寸进行可扩展的响应式设计，这在下一个布局断点时保持设计。
也就是说，我们的结果必须与1920年代的设计相同，并保持此视图直到834px以成比例的减少。
可以通过几种方式完成此任务，但是我想直接将FIGMA的样式从无手动转换中将其置于px中。但是必须在vw上进行屏幕尺度设计...
有一个解决方案。这个想法很简单。确实，您不必考虑扩展设计。它可以通过简单的SCSS函数来解决，该功能将自动计算缩放。
首先，我们需要声明3个功能，以将像素度量转换为vw度量（用于台式机，平板电脑和移动设备）。
ð¥codepen https://codepen.io/ktr92/pen/gOBxbZb
scss ：
@function get_vw_large($value) {
$vw-viewport-large: 1920; // there is design breakpoint for desktop screen view
$vw-context: $vw-viewport-large * 0.01 * 1px;
@return $value/ $vw-context * 1vw;
@return $value;
}
@function get_vw_medium($value) {
$vw-viewport-medium: 834; // there is design breakpoint for tablet screen view
$vw-context: $vw-viewport-medium * 0.01 * 1px;
@return $value/ $vw-context * 1vw;
@return $value;
}
@function get_vw_small($value) {
$vw-viewport-small: 834; // there is design breakpoint for mobile screen view
$vw-context: $vw-viewport-small * 0.01 * 1px;
@return $value/ $vw-context * 1vw;
@return $value;
}
然后我们可以使用它！
在整个项目中，我们需要在功能上包装所有基于像素的样式。
例如，我们有一个具有以下样式的块（来自无花果底部）：
CSS：
.block{
font-size: 18px;
line-height: 23px;
margin-bottom: 2px;
padding: 20px;
}
必须通过以下方式重写：
.block {
font-size: get_vw_large(28px);
line-height: get_vw_large(33px);
margin-bottom: get_vw_large(42px);
padding: get_vw_large(20px);
}
因此，它将转换为vw值，我们将在浏览器中看到以下样式：
font-size: 0.9375vw;
line-height: 1.19792vw;
margin-bottom: 0.10417vw;
padding: 1.0416666667vw;
ð¥我们可以为@Media查询使用任何断点，但是我们的结果将在每个设计断点（1920，834，320）上是完美的。对于平板电脑断点，必须以以下方式重写：
@media (max-width: 1023px) {
.block {
font-size: get_vw_medium(18px);
line-height: get_vw_medium(23px);
margin-bottom: get_vw_medium(20px);
padding: get_vw_medium(20px);
}
}
对于移动断点，它具有以下样式（来自无花果底部）：
.block{
font-size: 14px;
line-height: 18px;
margin-bottom: 20px;
}
必须通过以下方式重写：
@media (max-width: 480px) {
.block {
font-size: get_vw_small(13px);
line-height: get_vw_small(18px);
margin-bottom: get_vw_small(20px);
padding: get_vw_small(20px);
}
}