仅使用1个功能构建响应式网站
#css #网络开发人员 #scss #网站

在当今世界建立响应迅速的网站可能是很多工作。在为每个设备屏幕尺寸使用大量媒体时,Mordern CSS并不能更容易。我已经建立了4年以上的网站,我唯一讨厌工作的是为人们甚至无法使用的屏幕构建呼吸页。我的懒惰使我想出了一种更简单,可扩展的方式来使我的网站真正响应。

欢迎萨斯和混合器。 SASS是一个CSS框架,可让您创建称为搅拌机的功能。现在,我们可以创建一个函数,当屏幕尺寸更改时,将我们的大小转换为响应值。

首先我们需要定义一个观点

$custom-viewport: 1920;

此观点是您要构建的中性屏幕尺寸。

然后创建主函数,随时称其为任何东西。让我们称其为今天get-vw

$custom-viewport: 1920;

@function get-vw($font) {
  $custom-context: $custom-viewport * 0.01 * 1px;
  @return $font / $custom-context * 1vw;
}

我们完成了90%的完成,现在剩下的就是知道如何使用它。
简单包装函数将所有px值归。示例

h1 {
  font-size: CustomResponsive(36px); // Font size now dynamically adapts!
}

做得好,您已经存档了响应能力。