如何調整 max = “100”<progress> 根據屏幕尺寸？

Question

我正在為我的網站制作上傳功能。 服務器在 NodeJS 和 Express 上運行。 客戶端基於 EJS。 因此，有一個進度條用於顯示已上傳文件的數量，但問題在於，上傳的百分比與進度條不匹配。 數學結果很好，我通過將元素中的最大值從 100 調整到 150 解決了這個問題。（我不知道為什么會這樣，但確實如此，如果您知道原因，也請告訴我)

現在，這只適用於 1920 x 1080 屏幕，而不適用於我的 720 x 480 手機屏幕。因此，我想知道如何在屏幕的基礎上使用 CSS（如果有辦法）調整最大值大小與媒體查詢。 這是我的客戶端 JavaScript：

 //Upload Handlers and Functions function _(el) { return document.getElementById(el); } function uploadFile() { var file = _("file").files[0]; var formdata = new FormData(); formdata.append("file", file); var ajax = new XMLHttpRequest(); ajax.upload.addEventListener("progress", progressHandler, false); ajax.addEventListener("load", completeHandler, false); ajax.addEventListener("error", errorHandler, false); ajax.addEventListener("abort", abortHandler, false); ajax.open("POST", "/uploadFile"); ajax.send(formdata); } //Conversion Functions function convertInputBytes(input) { if(input < 1000000) { output = input / 1000 output = +output.toFixed(2); output = output + " kilobytes out of " return output; } else if(input > 1000000 && input < 1000000000) { output = input / 1000000 output = +output.toFixed(2); output = output + " megabytes out of " return output; } else if(input > 1000000000 && input < 100000000000000) { output = input / 1000000000 output = output.toFixed(2); output = output + " gigabytes out of " return output; } } function convertOutputBytes(input) { if(input < 1000000) { output = input / 1000 output = +output.toFixed(2); return output; } else if(input > 1000000 && input < 1000000000) { output = input / 1000000 output = +output.toFixed(2); return output; } else if(input > 1000000000 && input < 100000000000000) { output = input / 1000000000 output = output.toFixed(2); return output; } } //Error and progress handlers function progressHandler(event) { _("loaded_n_total").innerHTML = "Uploaded " + convertInputBytes(event.loaded) + convertOutputBytes(event.total) var percent = (event.loaded / event.total) * 100; _("progressBar").value = percent; _("status").innerHTML = Math.round(percent) + "% uploaded"; } function completeHandler(event) { _("status").innerHTML = event.target.responseText; _("progressBar").value = 0; document.getElementById("displayedFileName").innerHTML = "Choose another file" } function errorHandler(event) { _("status").innerHTML = "Upload Failed"; } function abortHandler(event) { _("status").innerHTML = "Upload Aborted"; }

和我的上傳表單的 HTML：

 <form id="upload_form" enctype="multipart/form-data" method="post"> <ul class = "actions fit"> <li><label class = "button fit"><input type="file" name="file" style = "display:none;" id="file" onchange = "uploadFile()"><i id = "displayedFileName">Choose File</i></label><li> </ul> <progress id="progressBar" value="0" step = "0.001" max="112"></progress> <h2 style = "text-align: center;" id="status"></h2> <h3 style = "text-align: center;" id="loaded_n_total"></h3> </form>

Answer 1

對於響應式設計，請使用相對長度單位，例如 vw：

  <progress id="progressBar" value="0" step = "0.001" max="100" style="width:80vw"></progress>