Question

我目前正在从事一个项目，我希望文本居中，并在调整大小时保持彼此成比例。当我更改了将其保持在中心而不使div跨整个屏幕的方法时，它似乎改变了文本在屏幕上所处位置的比例。

我以前在三个div ID的==三个文本行中使用百分比。该代码如下所示：

`#moot3{

  color: white;

  font-family: LemonMilk;
  text-shadow: 11px 10px 20px black;
  position: absolute;
  top: 52.25%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%) ;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none; 
-ms-user-select: none; `

在1920x1080显示器上，它看起来很完美，每个css块的百分比都不同。 https://gyazo.com/f7435bc684648e624e114c010b6ea61d

但是，在1366x768显示器和移动设备上，它看起来是相同的，但是重叠了。 https://gyazo.com/2b272f52e3a18db6cb66290a4e8d427e

我曾尝试将“ vw”和“ vh”的百分比交换为它的值乘以视口大小，但无济于事。更改后的代码：

`#moot2{

  color: white;
  font-family: LemonMilkIt;
  text-shadow: 11px 10px 20px black;
  position: absolute;
  top: 56.5vh;
  left: 50vw;
  margin-right: -50vw;
  transform: translate(-50%, -50%);
  user-select: none;
}`

我目前不知道下一步该怎么做，将不胜感激：smiley：

完整的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vuelvo | Coming Soon</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" media="screen" href="css/style.css">
  <link rel="icon" href="icon.png">
</head>
<body>


<!-- particles.js container -->
<div id="moot"><font size="+7">Vuelvo</font></div>
<div id="moot2"><font size="+3">Coming Soon</font></div>
<div id="moot3"><font size="+3">_________________</font></div>
<div id="particles-js"></div>

<!-- scripts -->
<script src="js/particles.js"></script>
<script src="js/app.js"></script>








</body>
</html>

完整CSS：

html,body{ 
    width:100%;
    height:100%;
    background:#111;
}

html{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body{
  font:normal 75% Arial, Helvetica, sans-serif;
}

canvas{
  display:block;
  vertical-align: bottom;
}


@font-face {
  font-family: LemonMilk;
  src: url(LemonMilk.otf);
}
@font-face {
  font-family: LemonMilkIt;
  src: url(LemonMilkitalic.otf);
}

/* ---- particles.js container ---- */

#particles-js{
  width: 100%;
  height: 100%;
  background-color: #343434;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  color: white;
  text-shadow: 11px 10px 20px black;
  font-family: LemonMilk;
  text-align: center; text-align: center;

}

#moot{

  color: white;
  font-family: LemonMilk;
  text-shadow: 11px 10px 20px black;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none; 
  -ms-user-select: none; 
}

#moot2{

  color: white;
  font-family: LemonMilkIt;
  text-shadow: 11px 10px 20px black;
  position: absolute;
  top: 56.5%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none; 
  -ms-user-select: none; 
}

#moot3{

  color: white;

  font-family: LemonMilk;
  text-shadow: 11px 10px 20px black;
  position: absolute;
  top: 52.25%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%) ;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none; 
-ms-user-select: none; 
}
@viewport {
  width: device-width ;
  zoom: 1.0 ;
}

百分比和视口高度/宽度未调整与格式化文本的关系中的比例

0 个答案: