静态页面css_从静态到动态CSS值-CSDN博客

本文介绍了一种使用CSS实现的可自定义大小的开关组件。作者在寻找理想的开关组件时发现现有解决方案难以修改，于是采用HTML和CSS开发了一个简单且高度可定制的版本。文章详细讲解了如何通过交叉乘法保持长宽比不变地调整开关大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

静态页面css

While working on a Google Chrome extension, I found myself in need of a toggle switch. These are the little guys you’ll most commonly see on your phone or tablet to enable/disable things.

在使用Google Chrome扩展程序时，我发现自己需要拨动开关。这些是您最常在手机或平板电脑上看到的用于启用/禁用功能的小家伙。

寻找正确的开关 (Finding the Right Switch)

So I quickly set out in search of one that I could easily integrate into what I was building. One of the first places I looked at was Google’s Material Design, where sure enough, they had a switch component that I could install and use with just a few lines of code.

因此，我Swift着手寻找一种可以轻松集成到自己正在构建的程序中的程序。我看过的第一个地方是Google的Material Design，可以肯定的是，它们有一个开关组件，我只需几行代码就可以安装和使用它。

Once I got to playing around with it, however, I soon realized that I wasn’t completely happy with the way their switch behaved. And since all the styling and functionality are abstracted away inside the package files, it’s not very easy to make modifications.

一旦我开始玩弄它，但是，我很快就意识到，我是不会与他们交换的方式完全满意的表现。而且，由于所有样式和功能都在打包文件中被抽象掉了，因此进行修改不是很容易。

And so I came upon a simple switch implementation, made up of just a few lines of HTML and a single CSS file for all the styles.

因此，我想到了一个简单的switch 实现，该实现仅由几行HTML和所有样式的一个CSS文件组成。

W3Schools W3Schools

The bad news? The switch was too big. The good news? It was infinitely customizable.

坏消息？开关太大。好消息？它是无限可定制的。

Image for post — Switch: “I’m just big-boned”

重新缩放而不变形 (Rescaling Without Warping)

So, no big deal, right? All I needed to do was make the switch smaller while making sure that its aspect ratio remains the same. For that, as for most other matters in life, I had my trusty aide: cross-multiplication.

所以，没什么大不了的，对吧？我需要做的就是在缩小开关的同时确保其长宽比保持不变。为此，就像生活中的其他大多数事情一样，我有一个值得信赖的助手：交叉乘法。

In essence, cross-multiplication can be used to find an unknown given two equal fractions. What this means for us, is that given two old dimensions, e.g. width and height, we could set a new height and determine its corresponding width.

本质上，交叉乘法可用于在给定的两个相等分数的情况下找到未知数。对于我们来说，这意味着给定两个旧尺寸(例如宽度和高度)，我们可以设置一个新的高度并确定其相应的宽度。

So with that, I could, say, set the height property of the .switch selector to a smaller20px instead of the default 34px and then calculate the new width as (old width*new height)/old height or (60*20)/34. The same would apply for all other values, in that they would be recalculated relative to the .switch selector’s height property value. Thus, the more general formula would be new value=(old value*new height)/old height.

因此，我可以说，将.switch选择器的height属性设置为较小的20px而不是默认的34px ，然后将新宽度计算为(old width*new height)/old height或(60*20)/34 。所有其他值也一样，因为它们将相对于.switch选择器的height属性值进行重新计算。因此，更通用的公式将是new value=(old value*new height)/old height 。

Note that the decision to use the .switch selector’s height property value as the basis for calculating all other values is arbitrary. One could just as well pick any other property from any other selector.

请注意，使用.switch选择器的height属性值作为计算所有其他值的基础的决定是任意的。一个人也可以从其他选择器中选择任何其他属性。

用动态值替换静态 (Replacing Static with Dynamic Values)

One way of doing this is to calculate the new values individually by hand and then hardcoding the results into the stylesheet.

一种方法是手工分别计算新值，然后将结果硬编码到样式表中。

The problem with doing it this way is that you lose a ton of flexibility. If you decide later that the new size is too big or too small, you’d have to recalculate everything. Luckily, we have CSS’s calc() function.

这样做的问题是您失去了很多灵活性。如果您以后决定新尺寸太大或太小，则必须重新计算所有内容。幸运的是，我们有CSS的calc()函数。

A CSS snippet showing the .switch selector now using calc() to dynamically calculate its values

一个CSS片段，显示.switch选择器，现在使用calc()动态计算其值

When using the calc() function, be mindful of how you use units! In the case of multiplication operations, at least one operand has to be a unitless number (e.g. calc(5px*5) not calc(5px*5px)). For division, the right-hand side also has to be a unitless number (e.g. calc(5px/5) not calc(5px/5px)). These rules, as well as others, must be followed in order for the expressions to be valid. Click here for more on working with units in calc().

Applying the same principle to all the styles, we end up with this:

将相同的原理应用于所有样式，我们得出以下结论：

Refactored styles for the switch using CSS variables and dynamic values

使用CSS变量和动态值的开关的重构样式

You’ll notice that in the final version I’ve used CSS variables to add a bit more structure to the overall code.

您会注意到，在最终版本中，我使用CSS变量为整体代码添加了更多结构。

Now I can easily try out different sizes for the switch, simply by changing --slider-new-height.

现在，只需更改--slider-new-height ，我就可以轻松尝试开关的不同大小。

Thanks for reading! And please let me know if you have any questions.

谢谢阅读！ 如果您有任何疑问，请告诉我。