javascript - 如何根据页面大小调整按钮图标的大小

Question

我有一个包含 2 个容器的 HTML 页面。其中一个容器包含一个带有问号图标的透明按钮。每当我调整页面大小时，我都希望相应地调整图标的大小。

这是我在 HTML 文件中的 div 声明:

<div class="container button">
    <div class="col-xs-10 col-sm-70">
        <a href="#kmeans" class="btn btn-primary"><i class="fa fa-question-circle fa-4x" aria-hidden="true" title="How does it work"></i></a>
    </div>
</div>

这是我在 css 中设置容器的方式:

section#analyze .container.button {
    border: 2px solid black; /*delete'*/
    position: relative;
    margin-right: 10%;
    width: 5%;
    display: none;
    height: 120%;
}

这就是我在 css 中设置按钮的方式:

section#analyze .container.button .btn-primary {
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    font-size: 100%;
    width: 100%;
    height: 100%;
    left: 20%;
    margin-top: 20%;
    position: initial;
}

当我调整页面本身大小时，我需要更改什么才能使图标变小或变大？

Answer 1

您可以在 css 中使用 screen 和 height 属性。大众和大众:https://css-tricks.com/viewport-sized-typography/