0

我有一个带有 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 变小或变大?

4

1 回答 1

0

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

于 2019-05-19T17:50:00.700 回答