【发布时间】：2020-12-09 03:29:18
【问题描述】：
我最近开始使用 Figma 来设计网页。完成页面设计后，我导出了所有 SVG 文件并将它们添加到我的 HTML 文档中。我去从 Figma 中复制 CSS 样式，但所有内容都超出了尺寸，导致所有内容都不合适。
我尝试用更大的高度/宽度重新设计它，但出现了同样的问题。
我是否创建了与我的显示器分辨率大小相同的 Figma 画布？
codepen：https://codepen.io/HasanTheSyrian_/pen/BaKLrrO
Figma 库：https://www.figma.com/file/DXbkUoTm9W1uCJpwipeVCQ/MyFormWebsite?node-id=16%3A0
（上面的面板是重新设计的，试图使 SVG 元素与浏览器的大小相同，下面的面板是我认为合适的第一个面板）
由于 SVG 的 1000 多个字符数之一，它超出了 3000 个字符的限制，因此无法在此处发布其余代码。
index.css
body {
font-family: 'Alata', sans-serif;
background-color: #E5E5E5;
}
header {
display: flex;
position: absolute;
width: 100%;
height: 63px;
left: 0px;
top: 0px;
background: #009ABC;
box-shadow: 0px 4px 22px 4px rgba(0, 0, 0, 0.32);
}
.logo {
width: 347px;
height: 195px;
left: -136px;
top: -66px;
position: absolute;
}
.upperTextContainer {
position: absolute;
width: 563px;
height: 86px;
left: 74px;
top: 261px;
font-size: 62px;
outline: none;
}
.lowerTextContainer {
position: absolute;
width: 780px;
height: 82px;
left: 74px;
top: 359px;
margin: 24px 0px 24px 0px;
font-family: Alata;
font-style: normal;
font-weight: normal;
font-size: 30px;
line-height: 41px;
color: #000000;
}
.coderIllustration {
position: absolute;
width: 594px;
height: 451px;
left: 170px;
top: 509px;
}
.wave1 {
position: absolute;
width: 2191px;
height: 854px;
left: -34px;
top: 106px;
}
.wave2 {
position: absolute;
width: 2191px;
height: 854px;
left: -34px;
top: 167px;
}
.wave3 {
position: absolute;
width: 2191px;
height: 854px;
left: -34px;
top: 247px;
}
【问题讨论】：