Question

我当前的网站出现“问题”（这并不是困扰我的问题），当分辨率更改为较小的值时，我的按钮将隐藏。这是一个gif，以便您更好地理解。 https://i.imgur.com/nlkJs5G.gifv。我该如何解决它，使其随页面缩小而使人们仍然可以在不同的屏幕分辨率上单击它？

这里是指向我的网站https://newcool.win/的链接（PS f12，ctrl等已禁用。因此，如果您需要控制台，则必须在加载之前将其拉起）（PPS再次输入我的代码，看起来好像有一堆“用户fuckups”（一堆html结束标记正在玩捉迷藏的游戏），并且在我修复按钮问题的同时将对其进行修复）

下面是按钮的html。 fab或fa-steam-symbol或fa-discord等的.css来自https://fontawesome.com/（如果有人不熟悉的话）

 .awrapper{
    align-content:center;
    background-size:cover;
    display:flex;
    display:-ms-flexbox;
    display:-webkit-flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    min-height:100%;
    ms-flex-direction:row;
    ms-flex-line-pack:center;
    ms-flex-pack:center;
    ms-flex-wrap:wrap;
    webkit-align-content:center;
    webkit-flex-direction:row;
    webkit-flex-wrap:wrap;
    webkit-justify-content:center;
}
 .media{
    font-size:30px;
    text-align:center;
	padding-top:30px;
}
 .media>a{
    margin-right:80px;
    text-decoration:none;
    transition:color 0.5s ease;
}
 .media>a#vk{
    font-size:35px;
}
 .media>a:last-child{
    margin-right:0;
}
.animated{
    -webkit-animation-duration:2s;
    animation-duration:3s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both
	margin: 500px
}
@-webkit-keyframes fadeInUpBig{
    from{
        opacity:0;
        -webkit-transform:translate3d(0,2000px,0);
        transform:translate3d(0,2000px,0)
    }
    to{
        opacity:1;
        -webkit-transform:none;
        transform:none
    }
}
@keyframes fadeInUpBig{
    from{
        opacity:0;
        -webkit-transform:translate3d(0,2000px,0);
        transform:translate3d(0,2000px,0)
    }
    to{
        opacity:1;
        -webkit-transform:none;
        transform:none
    }
}
.fadeInUpBig{
    -webkit-animation-name:fadeInUpBig;
    animation-name:fadeInUpBig
}
 .hvr-grow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}
 .hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
    -webkit-transform: scale(2);
    transform: scale(2);
}

<div class="awrapper">
    <div class="media animated fadeInUpBig" style="animation-delay: 5s;">
    <a href="BLNAK_LINK/Steam" target="_blank">
    	<i class="fab fa-steam-symbol hvr-grow" title="Steam"></i>
    <a href="BLNAK_LINK/discord" target="_blank">
    	<i class="fab fa-discord hvr-grow" title="Discord"></i>
    </a>
    <a href="BLNAK_LINK/hosting" target="_blank">
    	<i class="fab fa-ioxhost hvr-grow" title="Hosting"></i>
    </a>
    <a href="BLNAK_LINK/TRADEOFFER" target="_blank">
    	<i class="far fa-handshake hvr-grow" title="Tradelink"></i>
    </a>
    <a href="BLNAK_LINK/PLAYLIST" target="_blank">
    <i class="fas fa-music hvr-grow" title="Playlist"></i>
    </a>
    </div> 
    </div>

如果我有任何遗漏或有任何疑问，请告诉我，我会尽力回答。

Answer 1

感谢您的帮助。您可以查看该网站及其外观。

我添加了一个名为unmoveable的新类

来自

<div class="media animated fadeInUpBig" style="animation-delay: 5s;">

收件人

<div class="media animated fadeInUpBig unmoveable">

css

.unmoveable {
    animation-delay: 5s;
    position:fixed;
    bottom: 100px;
}

如何使我的网站按钮随屏幕分辨率缩小？

1 个答案: