尝试缩放页面时出现问题

Question

我的网页有问题，当我尝试缩放时会发疯：)）。我使用CSS网格使页面有点响应（这是我第一次使用它），但是现在我感到非常沮丧，因为我无法缩放而不弄乱整个页面，div，布局，设计等：）。） >

您可以在这里看到我在说什么：https://youtu.be/5zQX1qnoRX0

谢谢

/* basic.css */

.container>div {
    display: flex;
    justify-content: center;
    align-items: center;
    2em;
}

html,
body {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    padding: 10px;
    0px;
}

body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    background: url["imagini/123.jpg") no-repeat center fixed;
    background-size: cover;
}

button {
    position: relative;
    top: 10%;
}

button {
    background: none;
    color: #ccc;
    height: 50px;
    border: 10px solid transparent;
    -webkit-border-image: u rl("imagini/rama.png") 30 stretch;
    -o-border-image: u rl("imagini/rama.png") 30 stretch;
    border-image: u rl("imagini/rama.png") 70 stretch;
    15px;
    transition: .6s;
    overflow: hidden;
}

button:focus {
    outline: none;
}

button:before {
    content: '';
    display: block;
    position: absolute;
    background: rgba(255, 255, 255.5);
    width: 60px;
    height: 100%;
    left: 0;
    top: 0;
    opacity: .5s;
    filter: blur(30px);
    transform: translateX(-130px) skewX(-15deg);
}

button:after {
    content: '';
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, .2);
    width: 30px;
    height: 100%;
    left: 30px;
    top: 0;
    opacity: 0;
    filter: blur(30px);
    transform: translate(-100px) scaleX(-15deg);
}

button:hover {
    background: #B8860B;
    cursor: pointer;
}

button:hover:before {
    transform: translateX(300px) skewX(-15deg);
    opacity: .6;
    transition: .7s;
}

button:hover:after {
    transform: translateX(300px) skewX(-15deg);
    opacity: 1;
    transition: .7s;
}

#umbra {
    border-radius: 15px;
    box-shadow: 0 5px 18px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#jos {
    background-image: u rl("imagini/11.png");
    background-size: cover;
    border-radius: 5px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1];
    Corbel;
    14pt;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    color: black;
}

/* index.css */
.container {
    height: 100%;
    display: grid;
    grid-gap: 3px;
    grid-template-columns: repeat(12, 1fr);
    /* grid-template-columns: 150px 150px 180px 150px 150px 150px 150px 150px 150px 150px 150px 150px;*/
    /* grid-template-rows: 170px 30px 190x 190px 190px 190px 190px 190px 30px 30px 30px 30px 30px 70px;*/
    grid-template-rows: repeat(13, 1fr);
    grid-template-areas: "cap1 cap1 nmc1 logo logo logo logo logo logo nmc2 cap2 cap2" "cap1 cap1 nmc1 logo logo logo logo logo logo nmc2 cap2 cap2" "cap1 cap1 nmc1 logo logo logo logo logo logo nmc2 cap2 cap2" "stg stg nmc1 meniu meniu meniu meniu meniu meniu nmc2 drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "nmc5 nmc5 nmc30 jos jos jos jos jos jos nmc31 nmc7 nmc7"
}

@media screen and (max-width:1921px) {
    .banner {
        grid-area: logo;
        background-image: url["imagini/banner.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }
    button {
        left: 4%;
        width: 100px;
    }
    .div1 {
        18px;
    }
}

@media screen and (max-width: 1681px) {
    button {
        left: 0%;
        width: 100px;
    }
}

@media screen and (max-width: 1441px] {
    button {
        left: 0%;
        width: 85px;
    }
    .div1 {
        14px;
    }
}

@media screen and (max-width: 1370px) {
    .container {
        display: grid;
        height: 100%;
        grid-gap: 3px;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(13, 1fr);
        grid-template-areas: "cap1 cap1 nmc1 logo logo logo logo logo logo nmc2 cap2 cap2" "cap1 cap1 nmc1 logo logo logo logo logo logo nmc2 cap2 cap2" "cap1 cap1 nmc1 logo logo logo logo logo logo nmc2 cap2 cap2" "stg stg nmc1 meniu meniu meniu meniu meniu meniu nmc2 drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "nmc5 nmc5 nmc30 jos jos jos jos jos jos nmc31 nmc7 nmc7";
    }
    .banner {
        grid-area: logo;
        background-image: url["imagini/banner.png");
        background-size: 740px 145px;
        background-repeat: no-repeat;
        background-position: center center;
    }
    button {
        left: 0%;
        width: 84px;
    }
    .div1 {
        12px;
    }
}

@media screen and (max-width: 1281px) {
    button {
        left: 0%;
        width: 81px;
    }
    .div1 {
        11px;
    }
}

@media screen and (max-width: 1153px) {
    .container {
        display: grid;
        height: 100%;
        grid-gap: 3px;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(13, 1fr];
        grid-template-areas: "cap1 cap1 nmc1 logo logo logo logo logo logo nmc2 cap2 cap2" "cap1 cap1 nmc1 logo logo logo logo logo logo nmc2 cap2 cap2" "cap1 cap1 nmc1 logo logo logo logo logo logo nmc2 cap2 cap2" "stg stg meniu meniu meniu meniu meniu meniu meniu meniu drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "stg stg corp corp corp corp corp corp corp corp drp drp" "nmc5 nmc5 nmc30 jos jos jos jos jos jos nmc31 nmc7 nmc7";
    }
    .banner {
        grid-area: logo;
        background-image: url["imagini/banner.png");
        background-size: 650px 170px;
        background-repeat: no-repeat;
        background-position: center center;
    }
    button {
        left: 0%;
        width: 83px;
    }
    .div1 {
        9px;
    }
}

@media screen and (max-width: 1025px) {
    .banner {
        grid-area: logo;
        background-image: u rl("imagini/banner.png");
        background-size: 600px 160px;
        background-repeat: no-repeat;
        background-position: center center;
    }
    button {
        left: 0%;
        width: 82px;
    }
    .div1 {
        40%;
    }
}

@media screen and (max-width: 801px) {
    .banner {
        grid-area: logo;
        background-image: u rl("imagini/banner.png");
        background-size: 460px 90px;
        background-repeat: no-repeat;
        background-position: center center;
    }
    button {
        left: 0%;
        width: 63px;
    }
    .div1 {
        40%;
    }
}

.cap1 {
    grid-area: cap1;
    background-image: u rl("imagini/tutan.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.cap2 {
    grid-area: cap2;
    background-image: u rl("imagini/tutan.png"];
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.nimic1 {
    grid-area: nmc1;
}

.nimic2 {
    grid-area: nmc2;
}

.nimic5 {
    grid-area: nmc5;
    background-image: url["imagini/jos.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.nimic7 {
    grid-area: nmc7;
    background-image: u rl("imagini/jos.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.menu {
    grid-area: meniu;
}

.stanga {
    grid-area: stg;
    background-image: u rl("imagini/poza1.png"];
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.trup {
    grid-area: corp;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 1em/8em;
}

.dreapta {
    grid-area: drp;
    background-image: url["imagini/poza2.png"];
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.jos {
    grid-area: jos;
}

.content {
    grid-area: cap3;
}

.footer {
    grid-area: cap4;
}

<!DOCTYPE html>
<head>
   <link rel="nofollow" href="index.css">
   <link rel="nofollow" href="basic.css">
   <title>Egiptul Antic</title>
   <link rel="nofollow" href="imagini/titlephoto.ico">
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
   <div class="container">
      <div class="stanga"></div>
      <div class="dreapta"></div>
      <div class="trup"></div>
      <div class="cap1"></div>
      <div class="cap2"></div>
      <div class="nimic1"></div>
      <div class="nimic2"></div>
      <div class="banner" id="umbra"></div>
      <div class="nimic31"></div>
      <div class="nimic30"></div>
      <div class="menu">
         <div class="btn-toolbar">
            <button type="button" onclick="window.location.href = 'acasa.html'" ><font color="#856514"; style="Corbel; 14pt;">Acasa</font></button>
            <button type="button" onclick="window.location.href = 'acasa1.html'" ><font color="#856514"; style="Corbel; 14pt;">Acasa1</font></button>
            <button type="button" onclick="window.location.href = 'acasa2.html'" ><font color="#856514"; style="Corbel; 14pt;">Acasa2</font></button>
            <button type="button" onclick="window.location.href = 'acasa3.html'" ><font color="#856514"; style="Corbel; 14pt;">Acasa3</font></button>
            <button type="button" onclick="window.location.href = 'acasa4.html'" ><font color="#856514"; style="Corbel; 14pt;">Acasa4</font></button>
            <button type="button" onclick="window.location.href = 'acasa5.html'" ><font color="#856514"; style="Corbel; 14pt;">Acasa5</font></button>
            <button type="button" onclick="window.location.href = 'acasa6.html'" ><font color="#856514"; style="Corbel; 14pt;">Acasa6</font></button>
         </div>
      </div>
      <div class="nimic5"></div>
      <div class="nimic7"></div>
      <div class="jos" id="jos">
         <a class="div1" href="acasa.html" target="_parent"><font color="#5f4907">Acasa</font></a>     <font class="div1" color="#473705">|</font>     
         <a class="div1" href="acasa1.html" target="_parent"><font color="#5f4907">Acasa1</font></a>     <font class="div1" color="#473705">|</font>     
         <a class="div1" href="acasa2.html" target="_parent"><font color="#5f4907">Acasa2</font></a>     <font class="div1" color="#473705">|</font>     
         <a class="div1" href="acasa3.html" target="_parent"><font color="#5f4907">Acasa3</font></a>     <font class="div1" color="#473705">|</font>     
         <a class="div1" href="acasa4.html" target="_parent"><font color="#5f4907">Acasa4</font></a>     <font class="div1" color="#473705">|</font>     
         <a class="div1" href="acasa5.html" target="_parent"><font color="#5f4907">Acasa5</font></a>     <font class="div1" color="#473705">|</font>     
         <a class="div1" href="acasa6.html" target="_parent"><font color="#5f4907">Acasa6</font></a>
      </div>
   </div>
</body>
</html>

Answer 1

从CSS来看，您的页面没有响应能力，响应能力意味着它跨越了电话，中型设备和大屏幕设备等小型设备，我建议您遵循引导程序断点，然后像这样从最小的屏幕开始将其添加到其中

  

@media（最小宽度：576像素）{...} //中型设备（平板电脑，768px及以上）@media（最小宽度：768px）{...} //大型设备（桌面，992px及以上）@media（最小宽度：992px）{...} //超大型设备（大型台式机，1200px以上）@media（最小宽度：1200px）{...}

然后在每个断点上设置按钮大小。