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;
}

在调整页面本身大小时，我需要更改什么以使ICON变小或变大？

Answer 1

您可以在CSS中使用具有和高度属性的屏幕。大众和大众：https://css-tricks.com/viewport-sized-typography/

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

1 个答案: