Fatal编程技术网
  • javascript/
  • Javascript 如何使显示内容具有响应性？

Javascript 如何使显示内容具有响应性？

javascript html css

Javascript 如何使显示内容具有响应性？,javascript,html,css,Javascript,Html,Css,我无法调整内容的大小。调整浏览器窗口的大小时，SVG图像的比例会改变，但红点会保持不变。有没有办法解决这个问题 代码： 您好，您需要使您的宽度最大内容和您的保证金0px自动在您的css width:max-content; margin: 0px auto; 请看一下我对这篇文章的回答。搜索 a good convention 它会带你去邮局。或者搜索我的名字 看起来点不随屏幕缩放的原因是因为它们的位置是绝对的，并且静态地基于像素 .stationlocation:nth-child(1)

我无法调整内容的大小。调整浏览器窗口的大小时，SVG图像的比例会改变，但红点会保持不变。有没有办法解决这个问题

代码：

您好，您需要使您的宽度最大内容和您的保证金0px自动在您的css

width:max-content;
margin: 0px auto;
请看一下我对这篇文章的回答。搜索

a good convention
它会带你去邮局。或者搜索我的名字

看起来点不随屏幕缩放的原因是因为它们的位置是绝对的，并且静态地基于像素

.stationlocation:nth-child(1){
    position:absolute;
    top:140px;
    left:575px;
}
<>你可能想考虑使用CSS网格。希望这有帮助

我已经用工作代码编辑了JSFIDLE

将所有SVG包装在一个div中，并添加相对于它的位置，然后您可以为内部元素提供绝对定位，并可以使用位置调整top、left等百分比将元素放置在所需位置。下面是工作代码

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="Interaktywny poradnik szybkiego startu dla Brackets.">
    <link rel="stylesheet" href="panele_solarne.css">
  </head>

  <body>

    <div class="container">
      <div class="svg-wrap">
        <svg id="PV_svg" viewBox="0 0 4793 4950" xmlns="http://www.w3.org/2000/svg" onload="var src; if (document.documentURI) src = document.documentURI; else if (this.getSrc) src = this.getSrc(); else src = document.location.href + ''; try {parent.preload.load(src);}catch(e) {}" width="100%" height="100%">
          <path d="M143.515 4733.376l662.293-2452.454 531.914-558.737 318.63-500.329 616.195-442.396 476.63 71.1-108.496 252.335-341.8 84.728-107.27 225.14 41.436 127.724 81.633 21.066-34.233 273.864-487.162-71.099-23.7 508.229 650.427 279.131-226.464 861.093 200.131 56.616 134.3-176.432 334.43 84.266 13.166-685.978 180.382-38.183 21.067-408.163 324.908-470.9-24.206-100.549-297.925-29.793 44.688-534.403 572.68 88.904L3842 961.158l547.729-463.462 86.596 259.632-247.228 2349.979-549.045 64.516-200.132 667.544-2189.598 15.8-679.394 703.094z" opacity=".204" fill="#00f" fill-rule="evenodd" stroke="#000" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" />
          <g opacity=".522" fill="green" fill-rule="evenodd" stroke-width="15">
            <path d="M183.876 4624.769h209.013l8.379-34.448h93.101l49.344-187.134 201.514-.292 31.6-129.032h100.065L937.46 4023.7l-318.631 1.316 57.933-230.414H402.897z" stroke="#000" />
            <path d="M2292.161 826.224h210.41l.452 24.206h124.304l-.413 26.068h87.928l-74.161 226.397-167.903.771-3.724 39.103-206.685 1.862-70.758 268.133 91.24 363.096-316.545 1.862v-37.24l-72.956-326.394 22.68-79.53-294.23.982 32.239-63.651h78.68l26.492-92.937 189.439.771 15.8-39.5-93.483 1.317 11.85-40.816h65.833l21.066-73.733h94.8l37.718-109.528 89.997 1.562 10.533-39.5 96.116-1.316z" stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M1621.8 1335.54l-35.349 95.844 26.068 139.652h-158.272l27.93 128.48 7.449 31.655 78.205 1.862 1.862 57.723-264.409-1.862-35.378 44.689 9.31 78.205-94.964 1.862-14.896 57.723-39.103 171.307 301.65 1.862-13.035 61.447 296.063 1.862 59.585-296.063 1.862-171.307h189.928l-72.956-326.393 22.68-79.53z" stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M1130.253 2142.68l-191.337 1.862-39.874 137.151-93.234-.77-47.19 180.164h89.152l-11.944 42.282-89.47-.546-76.025 313.913 599.652 1.277 148.885-612.024 13.035-61.447z" stroke="#000" />
            <path d="M1418.868 2205.99l-158.273 654.505 266.27-.932 9.31-27.931h310.959l126.619-463.647h-91.24l7.449-33.517-201.872-.77-22.118 87.128-20.153-.814 53.983-213.298-280.934-.727M676.76 3794.6l102.7-389.73h331.797l149.338-544.375 9.388-42.482-599.652-1.277L402.897 3794.6z" stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M937.459 4023.699l6.591-33.883h191.79l31.654-137.79 96.826 1.861 123.435-449.468-276.498.452H779.46l-102.7 389.73-57.932 230.414zM1191.7 3110.937H2070.58l165.102-625.092-94.8-2.633 7.9-31.6h-197.498l-104.15 380.02h-310.958l-9.31 27.931-266.27.932z" stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M2044.51 3170.522l-69.214 306.915-242.516 1.543-94.192 320.908-3.724 37.241-344.156-.639 97.916-379.216h101.002l9.31-52.136-111.181-.72-276.498.453 63.685-238.074z" stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M1983.835 3434.93l194.742 1.862-5.586 33.517 93.873 1.09-36.695 139.879-101.867.545-11.172 48.413 100.87-.771-33.837 106.907 8.38 29.792-4.27 38.624-553.41 2.341 3.725-37.24 94.192-320.91 242.516-1.542z" stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M4236.122 684.71l202.962 1.861 11.172 46.55 15.827 29.793-81.62 751.24-587.229-2.634 52.666-458.196 89.533-2.633 18.433-165.899 100.066 2.634 2.633-79h102.7v-47.4l-13.167-39.499 86.899-5.267z" stroke="#0b1728" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M3805.993 1219.112l-392.889 1.862 5.586-40.964h-201.099l-9.31 76.343 16.758-1.862-35.379 335.166h-14.896v37.24l297.925-1.862-44.688 409.647h297.925zM3739.301 2072.416l581.962 2.633 63.2-560.895-587.229-2.634-18.433 186.965 93.482-1.316-3.95 43.45h-97.432zM3725.926 2034.682L3691.9 2354.18l-586.137 2.5 9.443-136.8 85.356-2.632 36.547-180.156zM3739.301 2072.416l-14.483 126.398h98.75l-7.9 60.567h-98.75l-10.533 93.482 583.278 1.317 31.6-279.131zM3105.764 2356.68l-32.69 324.03 581.51-.506 37.318-326.024z" stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M3706.385 2352.863l-20.22 180.844h101.208l-5.586 39.102-96.826 1.862-13.034 126.619h316.545l1.862-18.62 266.958-.098 32.371-328.392z" stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M4257.292 2682.572l-38.728 411.568-292.298-1.317-5.266 22.384-306.781 2.633 32.916-223.832h102.7l2.633-42.133h-100.066l19.525-150.585h316.545l1.862-18.62zM3654.583 2680.204l-5.932 42.499-303.03 1.457 8.558-44.108z" stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M3073.073 2680.71l-10.533 97.433-107.194 653.832 596.538-.452 22.158-126.266-102.248-.452 6.81-42.133h102.699l67.348-539.97-303.03 1.458 8.558-44.108z" stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M2955.346 3431.975l5.285-32.423h-290.477l-70.984 383.578-10.626.28-7.241 38.182 303.582-.658 14.39-55.3 90.85-.545-15.8 54.528h492.429l85.13-388.094zM2323.897 3493.087l-60.567 323.897h163.266l-39.5-323.897zM2427.912 3448.32l-7.9 23.7 2.634 102.7 32.916 243.58h106.65l2.633-32.916 67.149-337.064z" stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
          </g>
        </svg>
        <div class="stationlocationcontainer">
          <svg width="60" height="60" class="stationlocation">
            <rect class="station" rx="50%" ry="50%" x="5" y="5" width="5" height="5"></rect>
          </svg>
          <svg width="60" height="60" class="stationlocation">
            <rect class="station" rx="50%" ry="50%" x="5" y="5" width="5" height="5"></rect>
          </svg>
          <svg width="60" height="60" class="stationlocation">
            <rect class="station" rx="50%" ry="50%" x="5" y="5" width="5" height="5"></rect>
          </svg>
          <svg width="60" height="60" class="stationlocation">
            <rect class="station" rx="50%" ry="50%" x="5" y="5" width="5" height="5"></rect>
          </svg>
        </div>
      </div>
    </div>

  </body>

</html>
坐标是像素，将它们转换为%，这样大小就很重要了。 
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="Interaktywny poradnik szybkiego startu dla Brackets.">
    <link rel="stylesheet" href="panele_solarne.css">
  </head>

  <body>

    <div class="container">
      <div class="svg-wrap">
        <svg id="PV_svg" viewBox="0 0 4793 4950" xmlns="http://www.w3.org/2000/svg" onload="var src; if (document.documentURI) src = document.documentURI; else if (this.getSrc) src = this.getSrc(); else src = document.location.href + ''; try {parent.preload.load(src);}catch(e) {}" width="100%" height="100%">
          <path d="M143.515 4733.376l662.293-2452.454 531.914-558.737 318.63-500.329 616.195-442.396 476.63 71.1-108.496 252.335-341.8 84.728-107.27 225.14 41.436 127.724 81.633 21.066-34.233 273.864-487.162-71.099-23.7 508.229 650.427 279.131-226.464 861.093 200.131 56.616 134.3-176.432 334.43 84.266 13.166-685.978 180.382-38.183 21.067-408.163 324.908-470.9-24.206-100.549-297.925-29.793 44.688-534.403 572.68 88.904L3842 961.158l547.729-463.462 86.596 259.632-247.228 2349.979-549.045 64.516-200.132 667.544-2189.598 15.8-679.394 703.094z" opacity=".204" fill="#00f" fill-rule="evenodd" stroke="#000" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" />
          <g opacity=".522" fill="green" fill-rule="evenodd" stroke-width="15">
            <path d="M183.876 4624.769h209.013l8.379-34.448h93.101l49.344-187.134 201.514-.292 31.6-129.032h100.065L937.46 4023.7l-318.631 1.316 57.933-230.414H402.897z" stroke="#000" />
            <path d="M2292.161 826.224h210.41l.452 24.206h124.304l-.413 26.068h87.928l-74.161 226.397-167.903.771-3.724 39.103-206.685 1.862-70.758 268.133 91.24 363.096-316.545 1.862v-37.24l-72.956-326.394 22.68-79.53-294.23.982 32.239-63.651h78.68l26.492-92.937 189.439.771 15.8-39.5-93.483 1.317 11.85-40.816h65.833l21.066-73.733h94.8l37.718-109.528 89.997 1.562 10.533-39.5 96.116-1.316z" stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M1621.8 1335.54l-35.349 95.844 26.068 139.652h-158.272l27.93 128.48 7.449 31.655 78.205 1.862 1.862 57.723-264.409-1.862-35.378 44.689 9.31 78.205-94.964 1.862-14.896 57.723-39.103 171.307 301.65 1.862-13.035 61.447 296.063 1.862 59.585-296.063 1.862-171.307h189.928l-72.956-326.393 22.68-79.53z" stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M1130.253 2142.68l-191.337 1.862-39.874 137.151-93.234-.77-47.19 180.164h89.152l-11.944 42.282-89.47-.546-76.025 313.913 599.652 1.277 148.885-612.024 13.035-61.447z" stroke="#000" />
            <path d="M1418.868 2205.99l-158.273 654.505 266.27-.932 9.31-27.931h310.959l126.619-463.647h-91.24l7.449-33.517-201.872-.77-22.118 87.128-20.153-.814 53.983-213.298-280.934-.727M676.76 3794.6l102.7-389.73h331.797l149.338-544.375 9.388-42.482-599.652-1.277L402.897 3794.6z" stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M937.459 4023.699l6.591-33.883h191.79l31.654-137.79 96.826 1.861 123.435-449.468-276.498.452H779.46l-102.7 389.73-57.932 230.414zM1191.7 3110.937H2070.58l165.102-625.092-94.8-2.633 7.9-31.6h-197.498l-104.15 380.02h-310.958l-9.31 27.931-266.27.932z" stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M2044.51 3170.522l-69.214 306.915-242.516 1.543-94.192 320.908-3.724 37.241-344.156-.639 97.916-379.216h101.002l9.31-52.136-111.181-.72-276.498.453 63.685-238.074z" stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M1983.835 3434.93l194.742 1.862-5.586 33.517 93.873 1.09-36.695 139.879-101.867.545-11.172 48.413 100.87-.771-33.837 106.907 8.38 29.792-4.27 38.624-553.41 2.341 3.725-37.24 94.192-320.91 242.516-1.542z" stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M4236.122 684.71l202.962 1.861 11.172 46.55 15.827 29.793-81.62 751.24-587.229-2.634 52.666-458.196 89.533-2.633 18.433-165.899 100.066 2.634 2.633-79h102.7v-47.4l-13.167-39.499 86.899-5.267z" stroke="#0b1728" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M3805.993 1219.112l-392.889 1.862 5.586-40.964h-201.099l-9.31 76.343 16.758-1.862-35.379 335.166h-14.896v37.24l297.925-1.862-44.688 409.647h297.925zM3739.301 2072.416l581.962 2.633 63.2-560.895-587.229-2.634-18.433 186.965 93.482-1.316-3.95 43.45h-97.432zM3725.926 2034.682L3691.9 2354.18l-586.137 2.5 9.443-136.8 85.356-2.632 36.547-180.156zM3739.301 2072.416l-14.483 126.398h98.75l-7.9 60.567h-98.75l-10.533 93.482 583.278 1.317 31.6-279.131zM3105.764 2356.68l-32.69 324.03 581.51-.506 37.318-326.024z" stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M3706.385 2352.863l-20.22 180.844h101.208l-5.586 39.102-96.826 1.862-13.034 126.619h316.545l1.862-18.62 266.958-.098 32.371-328.392z" stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M4257.292 2682.572l-38.728 411.568-292.298-1.317-5.266 22.384-306.781 2.633 32.916-223.832h102.7l2.633-42.133h-100.066l19.525-150.585h316.545l1.862-18.62zM3654.583 2680.204l-5.932 42.499-303.03 1.457 8.558-44.108z" stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M3073.073 2680.71l-10.533 97.433-107.194 653.832 596.538-.452 22.158-126.266-102.248-.452 6.81-42.133h102.699l67.348-539.97-303.03 1.458 8.558-44.108z" stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M2955.346 3431.975l5.285-32.423h-290.477l-70.984 383.578-10.626.28-7.241 38.182 303.582-.658 14.39-55.3 90.85-.545-15.8 54.528h492.429l85.13-388.094zM2323.897 3493.087l-60.567 323.897h163.266l-39.5-323.897zM2427.912 3448.32l-7.9 23.7 2.634 102.7 32.916 243.58h106.65l2.633-32.916 67.149-337.064z" stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
          </g>
        </svg>
        <div class="stationlocationcontainer">
          <svg width="60" height="60" class="stationlocation">
            <rect class="station" rx="50%" ry="50%" x="5" y="5" width="5" height="5"></rect>
          </svg>
          <svg width="60" height="60" class="stationlocation">
            <rect class="station" rx="50%" ry="50%" x="5" y="5" width="5" height="5"></rect>
          </svg>
          <svg width="60" height="60" class="stationlocation">
            <rect class="station" rx="50%" ry="50%" x="5" y="5" width="5" height="5"></rect>
          </svg>
          <svg width="60" height="60" class="stationlocation">
            <rect class="station" rx="50%" ry="50%" x="5" y="5" width="5" height="5"></rect>
          </svg>
        </div>
      </div>
    </div>

  </body>

</html>

html,
body {
  background-color: white;
  height: 100%;
  width: 100%;
  padding: 0%;
  margin: 0%;
}

.container {
  border: 1px solid blue;
  height: 100%;
  width: 100%;
}

.station {
  stroke-width: 6;
  stroke: red;
  fill: red;
  opacity: 0.7;
}

.stationlocationcontainer {
  height: 100%;
  width: 100%;
  border: 1px solid green;
  position: absolute;
  top: 0%
}

.stationlocation:nth-child(1) {
  position: absolute;
  top: 34%;
  left: 82%;
}

.stationlocation:nth-child(2) {
  position: absolute;
  top: 47%;
  left: 70%;
}

.stationlocation:nth-child(3) {
  position: absolute;
  top: 70%;
  left: 70%;
}

.stationlocation:nth-child(4) {
  position: absolute;
  top: 67%;
  left: 54%;
}

#PV_svg {
  border: 1px solid red;
}

.svg-wrap {
  max-width: 500px;
  position: relative;
}