Semantic-UI 按钮大小变化

Semantic-UI 是一个流行的基于 HTML 和 CSS 的前端框架，它提供了丰富的组件和样式库，可以使开发者快速地创建出现代化的 Web 应用程序界面。其中包括多种不同大小的按钮，让开发者可以根据需要选择最合适的尺寸，以满足不同场景的需求。

按钮大小种类

Semantic-UI 提供了四种不同大小的按钮，分别是 mini、tiny、small、large，用法如下所示：

<button class="ui mini button">Mini</button>
<button class="ui tiny button">Tiny</button>
<button class="ui small button">Small</button>
<button class="ui large button">Large</button>

这些按钮的默认外观分别为：

• mini 按钮：非常小的按钮，适合在狭小的空间内使用。
• tiny 按钮：比 mini 按钮略大一些，也适合在非常狭小的空间内使用。
• small 按钮：默认大小的按钮，通常用于一般性操作。
• large 按钮：比 small 按钮略大一些，通常用于重要的操作或者较大的页面元素。

自定义按钮大小

如果以上四种尺寸的按钮不能满足需求，也可以使用 size 属性来自定义按钮大小。该属性可以设置为任何有效的 CSS 尺寸单位（例如 px、em、rem 等）。

<button class="ui button" style="font-size: 20px;">Custom Size</button>

需要注意的是，如果手动设置了字体大小，最好也同时设置按钮高度和宽度，以免按钮大小和内部文本大小不匹配。

小结

Semantic-UI 提供了多种不同大小的按钮，分别适用于不同场景。如果以上四种尺寸的按钮无法满足需求，也可以使用 size 属性来自定义按钮大小。由于按钮大小对页面布局有影响，因此在应用时需要谨慎考虑。