如何调整元素的大小以使其响应？ html/css [重复]答案

【问题标题】：How to resize the element so it is responsive? html/css [duplicate]如何调整元素的大小以使其响应？ html/css [重复]
【发布时间】：2021-02-21 03:09:59
【问题描述】：

我想让元素可调整大小，这意味着它应该根据设备屏幕的大小改变大小。

代码如下：

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500;700&family=Montserrat:wght@400;600&family=Oswald:wght@500&family=Pacifico&family=Roboto:ital,wght@0,400;0,900;1,500&display=swap');



.svg-file path {
    fill: transparent;
    stroke-width: 3;
    stroke: rgb(1, 36, 133);
}

.svg-file.z-logo path {
    stroke-dasharray: 550;
    stroke-dashoffset: 0;
}

.svg-file.z-logo path {
    animation: animate-zlogo 2s linear infinite;
}

.svg-file.z-logo svg {
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1));
    transform: scale(2);
}

.svg-file h2 {
    font-family: "Roboto", cursive;
    transform: translate(0, 50px) skewX(-210deg) rotate(-6deg);
    font-size: 3em;
    color: #044d77;
}

.svg-file span {
    animation: dots 2.5s steps(6, end) infinite;
    font-size: 5em;
    display: block;
    transform: translate(0, 65px) skewX(-210deg) rotate(-6deg);
    background-color: rgb(5, 46, 80);
    width: 8px;
    height: 5px;
}

@keyframes fadein-fadeout {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes animate-zlogo {
    0% {
        stroke-dashoffset: -50;
    }

    20% {
        stroke-dashoffset: 550;
        fill: transparent;
    }

    40% {
        fill: transparent;
        stroke-dashoffset: 1100;
    }

    60% {
        stroke-dashoffset: 1100;
        fill: #05f7f9;    
        }

    80% {
        stroke-width: 0;
       fill: #05f7f9;
    }

    100% {
        /* stroke-dashoffset: 0; */
        stroke-width: 3;
        fill: transparent;
    }
}
#preloader {
  position: fixed;
  z-index: 9999;
  overflow: hidden;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
}

.z-logo svg {
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  margin: auto;
  justify-content: center;
  align-items: center;
  align-content: center;
  position: relative;
  display: flex;
  width: 50%;
}

.z-logo::before {
  content: "";
    top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  margin: auto;
  background: black;
  position: absolute;
  display: inline-flex;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

<div id="preloader">
        <div class="svg-file z-logo">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133 133" width="133" height="133">
                <g id="H">
                    <path d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z"
                     fill="#47AF9A" />
                </g>
            </svg>
        </div>
    </div>

我面临的问题是，每当我在像手机这样的小设备上运行时，动画都会出现这样的情况：

我希望动画与我发送的代码中的一样，有什么建议可以解决这个问题吗？

【问题讨论】：

也许您可以尝试使用 calc(vw + px) 结合 vw 和 px 为您的每个大小值。所以它也将在px 中有一个基本大小，并添加vw 以跟随视口大小。除此之外，@media 将是另一个选项。

标签： javascript html jquery css animation

【解决方案1】：

我建议您查看@media 查询。参考链接： https://www.w3schools.com/css/css3_mediaqueries.asp

Bootstrap 为响应式设计提供了出色的支持，这也是使用 @media 查询完成的。链接在这里- https://getbootstrap.com/docs/5.0/layout/breakpoints/#media-queries

【讨论】：

【解决方案2】：

更新

从 HTML 中的 .svg-file div 中删除 width 和 height.. 并在 CSS 中添加：

.svg-file {
  width:50vw;
  max-width:450px;
}

对于.z-logo::before，将width: 60vw 和height 设置为与height: 60vw 相同的值

还为.z-logo::before 添加max-width 和max-height 到最大允许宽度以避免出现超大问题

.z-logo::before {
  width: 60vw;
  max-width: 500px;
  height: 60vw;
  max-height: 500px;
}

Demo

【讨论】：

这不是我想要的，现在动画是屏幕的大小，但我希望动画与我发送的代码中的大小相同，但是当屏幕变小时动画也应该变小并调整到那个大小。但最初，它应该以我在代码中发送的大小开始。
以上max-width 和max-height 仅用于演示目的，您可以随意调整它们，检查这里是否有200px x 200px 黑色方块和133px H codepen.io/Mi_Creativity/pen/vYyJPvo?editors=1100

【解决方案3】：

如果你给.svg-file 一个百分比大小，它会随着页面缩放。目前尚不清楚您希望最终结果是什么，但这应该会为您指明正确的方向。

【讨论】：

【解决方案4】：

尝试加入这种风格：

`html, 
body, 
#preloader { 
height: 100%; 
width:100%; 
position:relative 
}`

【讨论】：