Question

这可能看起来像是一个noob问题，但我对HTML和CSS很新。

无论如何，我的问题是，在我的电脑上，我正在处理的网站看起来完全正常放大100％，正常。当我缩小时，我的“加载屏幕”上的图像在屏幕上移动，当我放大时也一样。

此外，在其他计算机上，图像位于文本“正在加载...”的左侧，有些计算机将其放在文本的右侧。此外，在移动设备上，背景和文字位于屏幕顶部，而图像位于屏幕中间的白色背景上。

网站页面可在http://santatracking.net/loading.html

处查看

这是我的HTML代码：

<!DOCTYPE html>
<html>
  <head>

    <meta charset="utf-8">
    <!--<META HTTP-EQUIV="Refresh" CONTENT="1.5;URL=homevillage.html">-->

    <script src="script.js"></script>

    <link rel="stylesheet" href="loadingstyle.css">
    <link rel="preload" href="styles.css">
    <link rel="icon" type="favicon/png" href="http://santatracking.net/wp-content/uploads/2016/01/cropped-Team-yantsu-logo-transparent.png">

    <title>SantaTrackingLive</title>



  </head>

  <body>
    <div id="wrapper">
    <div class="text">Loading<span>.</span><span>.</span><span>.</span></div>

    <div id="loading">
      <img class="image" src="loadingimg.png" alt="" width="200" height="200">
    </div>
  </div>
  </body>
</html>

这是我的CSS代码

@font-face {
  font-family: mo;
  src: url(museo.ttf);
}

body {
  font-family: mo;
  background-image: url("bg.png");background-repeat: repeat;
  background-size: cover;
}
.text {
  position: absolute;
  width: 300px;
  height: 70px;
  font-size: 30px;
  margin: 426px 0 0 460px;
  background: -webkit-linear-gradient(#ffffff, rgb(183,183,183));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
  text-align: center;
  color: white;
}
#loading {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin: -90px 0 0 -100px;
    -webkit-animation:spin 1.25s linear infinite;
    -moz-animation:spin 1.25s linear infinite;
    animation:spin 1.25s linear infinite;
    outline: 1px solid transparent; -->
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

#wrapper {
height: auto;
width: 1200px;
margin: 0 auto;
}

@keyframes blink {
    0% {
      opacity: .2;
    }
    20% {
      opacity: 1;
    }
    100% {
      opacity: .2;
    }
}

.text span {
    background: -webkit-linear-gradient(#ffffff, rgb(183,183,183));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
    animation-name: blink;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

.text span:nth-child(2) {
    animation-delay: .2s;
}

.text span:nth-child(3) {
    animation-delay: .4s;
}

如果有人可以帮我解决这个问题，那就太好了。对于可能的noob声音问题再次抱歉哈哈

再次感谢

Answer 1

您需要使用JavaScript，因为您的浏览器不知道屏幕的分辨率，例如您的计算机在完整尺寸期间是1080，但是当您调整到较小的宽度并移动到下一行时。您必须使用window.width来获取窗口的宽度并使用DOM来操作HTML

网站设计在某些计算机上看起来并不相同在移动设备上

1 个答案: