Question

所以我创建了一个网站，只有在网页浏览器上放大到特定的测量值时才会看起来很理想（点击Ctrl，+），我希望它能自动放大或缩小，如果分辨率是在某台计算机上有所不同。我该怎么做？三江源。

@charset "utf-8";

/* CSS Document */

body {
  margin: 0;
  padding: 0;
  background-color: #DDDCDC;
  overflow-y: hidden;
}
.container {
  width: 1100px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
a {
  font-family: Arial;
  text-decoration: none;
  color: black;
  font-size: 15px;
}
ul {
  list-style-type: none;
}
li {
  display: inline;
  padding: 10px;
}
.list {
  position: relative;
  float: right;
  margin-top: 26px;
  z-index: 21;
}
.listlih:hover {
  color: #5D1CFF;
}
.listlia:hover {
  color: #D78E24;
}
.listlip:hover {
  color: #5060DF;
}
.listlic:hover {
  color: #09C03A;
}
.listlig:hover {
  color: #FF0004;
}
.myman {
  position: relative;
  width: 530px;
}
@font-face {
  font-family: coopert;
  src: url(fonts/fbsbltc.ttf);
}
span {
  font-family: coopert;
}
#coopert {
  position: absolute;
  margin-left: 450px;
  margin-top: 400px;
  font-size: 55px;
  z-index: 10;
}
.hoverheader:hover {
  color: #D9972B;
}
#official {
  position: absolute;
  margin-left: 730px;
  margin-top: 468px;
  color: black;
  font-size: 18px;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}
.firstlistt {
  position: absolute;
  margin-left: 920px;
  margin-top: 505px;
}
#fb2 {
  width: 35px;
}
#insta2 {
  width: 35px;
}
li.listtt {
  display: inline;
  padding: 5px;
}
.homebaby:hover {
  background-color: transparent;
  filter: grayscale(80%);
  -webkit-filter: grayscale(80%);
}
.instababy:hover {
  background-color: transparent;
  filter: grayscale(80%);
  -webkit-filter: grayscale(80%);
}
#aboutme {
  position: relative;
  font-family: Arial;
  font-size: 60px;
}
#orangeback {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #D78E24;
  margin-top: -13px;
  margin-left: -125px;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>#</title>
  <link href="stylesheet.css" rel="stylesheet" type="text/css" />
  <link href="images/anime1.ico" rel="icon" type="image/x-icon" />
</head>

<body>
  <div class="container">
    <ul class="list">
      <a class="alist" href="#">
        <li class="listlih" id="home"><strong>HOME</li></a>
<a class = "alist" href = "#"><li class = "listlia" id = "about">ABOUT ME</li></a>
<a class = "alist" href = "#"><li class = "listlip" id = "work">PORTFOLIO</li></a>
<a class = "alist" href = "#"><li class = "listlic" id = "contact">CONTACT</li></a>
<a class = "alist" href = "#"><li class = "listlig" id = "games">GAMES</strong>
        </li>
      </a>
    </ul>
    <a class="hoverheader" href="@">
      <div id="coopert"><span>Hey</span>
      </div>
    </a>
    <div id="official">The Official Website of CT</div>
    <ul class="firstlistt">
      <a class="homebaby" href="#" target="_blank">
        <li class="listtt">
          <img id="fb2" src="images/facebookcircle.png" />
        </li>
      </a>
      <a class="instababy" href="#" target="_blank">
        <li class="listtt">
          <img id="insta2" src="images/instagramcircle.png" />
        </li>
      </a>
    </ul>
    <img class="myman" src="images/jumper1.png" />
    <!-- DONT TOUCH!-->
  </div>
</body>

</html>

编辑：另外，我不知道这在不同尺寸的电脑上是否有所不同，但我希望它在您单击Ctrl时自动调整尺寸，在完全缩小时自动调整+ 5倍。

Answer 1

我猜您可以使用@viewport，示例如下。

@viewport {
  width: device-width;
    zoom: 1;
    min-zoom: 0.5;
    max-zoom: 3;
    user-zoom: fixed;
}

或者您可以阅读参考here

希望有所帮助。

如何让网站自动缩放到特定分辨率？

1 个答案: