Question

所以我的前端有问题。.我的文字必须留在页面底部，但是当我切换到4k显示器或2048x1080显示器时，文字会稍微向下或移到页面下方。这是我的CSS文件

body {
    font-family: 'Fjalla One', sans-serif;
    background: url("https://i.imgur.com/CTT4cRp.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

a {
    color: rgba(0, 0, 0, 0.77);
}

a:hover {
    color: #ffbd13;
}

.servername {
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 34px;
    margin: -12rem 0 0 -10rem;;
    top: 50%;
    left: 50%;
}

.ip {
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: -9.5rem 0 0 -6.2rem;
    top: 50%;
    left: 50%
}

#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0px;
    z-index: -1;
    left: 0px;
    background-image: url('');
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.content-box {
    border-radius: 25px;
    border: 2px solid;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    max-width: 70rem;
    margin: 0 auto;
    margin-top: 20rem;
    background: white;
    margin-bottom: 50rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-box {
    background-color: lightgrey;
    width: 100%;
    padding: 15px;
    margin: 30px;
}

.boxes-title {padding-bottom: 5px;}

.sidebar {
    width: 90%; /*Changed*/
    bottom: 520px;
    margin: 30px;
}

.side {
    padding: 15px;
    bottom: 520px;
    margin-bottom: 10px;
    background-color: lightgrey;
}

@media only screen and (min-width: 768px){
    .sidebar {
        width: 30%;
    }

    .news-box {
        width: 80%;
    }

    .content-box {
        flex-direction: row;
    }
}

我的html文件：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="{{ $keywords }}">
    <meta name="author" content="Lubomir Stankov">

    <title> {{ $title }} </title>


    <!-- CSS -->
    <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">


</head>

<body>

<div class="servername">{{ $heading }}</div>
<div class="ip">{{ $main_ip }}</div>

<div id="particles-js"></div>

@yield('content')

<script src="{{ asset('js/particles.min.js') }}"></script>
<script src="{{ asset('js/ptcls.js') }}"></script>
<script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
</body>

</html>

查看ip和servername。

我希望它像这样How i want to look

所以我希望您能帮助我...谢谢您的建议。.见

Answer 1

您知道如何编写媒体查询吗？您可以编写一个仅在大于2048px宽的屏幕上显示的屏幕。

.bottom-message {
  display: none;
}

@media (min-width: 2048px) {
  .bottom-message {
    display: block;
  }
}

如何在不移动其他分辨率的情况下将文字保持在顶部

1 个答案: