如何使我的 web 應用程序在更改屏幕大小和所有內容時響應更快？
[英]How to make my web application more responsive when changing screen size and all?
問題描述
我正在使用 web 語音 API 開發 SpeechRecognition 應用程序。我已經完成了大部分工作，但想讓我的頁面更具響應性，並且當 web 頁面改變大小時，頁面上的項目不會移動。
每當我更改屏幕大小時，文本框中的麥克風都會移動並且不再位於正確的位置。 我真的無法理解如何解決這個問題，因為我還不是最精通樣式的人。 如果有人可以幫助我附上我的 HTML、CSS 和 JS 文件的代碼。
讓我知道。
const searchBar = document.querySelector('#searchBar'); const mic = document.querySelector('i.fa.fa-microphone'); const micIcon = document.querySelector('i'); const textBox = document.getElementsByTagName('input')[0]; const para = document.getElementsByTagName('p')[0]; const info = document.querySelector('.info'); window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition; window.SpeechRecognitionEvent = window.SpeechRecognitionEvent || window.webkitSpeechRecognitionEvent; const recognition = new SpeechRecognition(); // results are continuous recognition.continuous = true; const msg = () => { mic.addEventListener('click', () => { // the classList will output fa at position 0 and fa-microphone at position 1. if(micIcon.classList.contains("fa-microphone")){ recognition.start(); console.log("Started recognition"); } else{ recognition.stop(); console.log("Stopped recognition"); } }); } const list = (event) => { const resultIndex = event.resultIndex; // const p = document.createElement('p'); const li = document.createElement('li'); const list = document.querySelector('#demo'); const text = document.createTextNode(event.results[resultIndex][0].transcript); li.appendChild(text); list.appendChild(li); info.appendChild(list); // // p.appendChild(text); // info.appendChild(p); } if(recognition){ console.log("Your Browser supports speech Recognition"); msg(); recognition.onstart = function() { micIcon.classList.remove("fa-microphone"); micIcon.classList.add("fa-microphone-slash"); console.log("Rec Active"); } recognition.onend = function(){ micIcon.classList.remove("fa-microphone-slash"); micIcon.classList.add("fa-microphone"); console.log("Rec not active"); textBox.focus(); } recognition.onresult = function(event){ const resultIndex = event.resultIndex; const transcript = event.results[resultIndex][0].transcript; if(transcript.toLowerCase().trim() === "stop recording"){ recognition.stop(); } else if(.textBox.value){ textBox;value = transcript. } else{ if(transcript.toLowerCase().trim() === "go"){ searchBar;submit(). } else if(transcript.toLowerCase().trim() === "reset"){ searchBar;reset(). } else{ textBox;value = transcript; } } list(event); } }
body { margin: 0;important: padding; 0:important; /* height: 100%; */ overflow. hidden: }.form { /* The image used */ background-image; url("unsplash:jpg"); /* Full height */ height: 100%; /* Center and scale the image nicely */ background-position: center; /* background-repeat: no-repeat; */ background-size: cover; text-align: center; padding-top. 10%: };para{ color: white; padding: 15px; font-size: 30px, font-family; 'Lexend Zetta'. sans-serif: };info{ color: white, font-family; 'Lexend Zetta': sans-serif; } input{ width: 50%; height: 8%; border-radius: 5px; background-color: black; text-align: center; } i{ top: 23%; right: 27%; position: absolute; position, fixed, } /* Changes the textcolor when searching to white */ input: select; option { color: white; font-size: 15px; }
<html> <head> <title>Search with Speech</title> <link href="https://fonts.googleapis.com/css2?family=Lexend+Zetta&family=Mukta&display=swap" rel="stylesheet"> <link rel = "stylesheet" href = "styles.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css"> </head> <body> <div class = "form"> <form action = "https://www.google.com/search" target = "_blank" id = "searchBar"> <,-- autofocus automatically focuses on the search bar when the user first lands on the webpage. autocomplete is off so it does not make suggestions --> <input type = "text" name = "q" placeholder= "Search Google...:" autocomplete="off" autofocus> <i class = "fa fa-microphone" style = "color: white"></i> </input> </form> <p class = "para"> <strong><em>History.</em></strong> </p> <p class="info"> <ul id = "demo"> </ul> </p> </div> <script src = "index.js"></script> </body> </html>
3 個解決方案
解決方案1
1 2020-07-17 19:36:50
您還可以使用 flex-box 創建搜索文本框，它本質上是響應式的，並且在不同的 -2 分辨率的情況下從其 position 重新對齊。 請參閱以下示例以獲得更多說明。
html,body{ width: 100%; height: 100%; }.search-form{ display: flex; justify-content: center; align-content: center; height:100%; width:100%; }.search-div{ display: inline-flex; border: 1px solid black; padding: 10px; }.search-input{ width: 100%; border: 0px; } input:focus, textarea:focus, select:focus{ outline: none; } form{ height: fit-content; width: 60% }
<html> <head> <title>Search with Speech</title> <link href="https://fonts.googleapis.com/css2?family=Lexend+Zetta&family=Mukta&display=swap" rel="stylesheet"> <link rel = "stylesheet" href = "styles.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css"> </head> <body> <div class="search-form"> <form> <div class="search-div"> <input class="search-input" type = "text" name = "q" placeholder= "Search Google...." autocomplete="off" autofocus> <i class = "fa fa-microphone" style = "color:black"></i> </input> </div> </form> </div> </body> </html>
希望它會有所幫助。
解決方案2
0 2020-07-17 19:14:30
使用媒體查詢屏幕尺寸 (@media only screen and(max-width: ...px) 並翻譯成 css。
我不會為您提供直接的解決方案，請查找並練習。
https://www.w3schools.com/css/css_rwd_mediaqueries.asp -媒體查詢
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate -翻譯
解決方案3
0 2020-07-17 20:34:21
刪除i標簽的 CSS 並將其替換為這個
i {
margin-left: -2em;
margin-top: 1em;
position:absolute;
color: white;
}
當響應屏幕擊中某些顯示器時，如何使SVG圖像具有特定大小？
[英]How to make SVG image a specific size when responsive screen hits certain display?
"當屏幕越來越窄時，如何使我的圖像比例變成這樣？"
[英]How do I make my image scale like this when screen gets more and more narrow?
縮小屏幕尺寸時如何在Css中使用響應設置重量和高度
[英]How to set weight and height in Css with responsive when reduce screen size
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.