Javascript 如何使我的web应用程序在更改屏幕大小和所有设置时更具响应性？

我正在使用web语音API开发一个用于语音识别的应用程序。我已经完成了大部分工作，但我想让我的页面更具响应性，并且当网页大小改变时，页面上的项目不会移动

每当我改变屏幕大小时，文本框中的麦克风就会移动，不再位于正确的位置。我真的无法理解如何解决这个问题，因为我还不是最精通造型的人。如果有人可以帮助我附加我的HTML，CSS和JS文件的代码

让我知道

const searchBar=document.querySelector（“#searchBar”）；
常量麦克风=document.querySelector（'i.fa.fa麦克风'）；
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=新的SpeechRecognition（）；
//结果是连续的
识别。连续=正确；
常量msg=（）=>{
mic.addEventListener（'单击'，（）=>{
//类列表将在位置0处输出fa，在位置1处输出fa麦克风。
if（micIcon.classList.contains（“fa麦克风”））{
识别。开始（）；
console.log（“启动识别”）；
}
否则{
识别。停止（）；
console.log（“停止识别”）；
}
});
}
常量列表=（事件）=>{
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]。转录本）；
李.附件（文本）；
表1.儿童（李）；
儿童信息（列表）；
// 
//p.儿童（文本）；
//儿童信息（p）；
}
如果（承认）{
log（“您的浏览器支持语音识别”）；
msg（）；
recognition.onstart=函数（）{
micIcon.classList.remove（“fa麦克风”）；
添加（“fa麦克风斜杠”）；
console.log（“Rec Active”）；
}
recognition.onend=函数（）{
micIcon.classList.remove（“fa麦克风斜杠”）；
micIcon.classList.add（“fa麦克风”）；
console.log（“Rec未激活”）；
textBox.focus（）；
}
recognition.onresult=函数（事件）{
const resultIndex=event.resultIndex；
const transcript=event.results[resultIndex][0]。transcript；
if（transcript.toLowerCase（）.trim（）=“停止录制”）{
识别。停止（）；
}
else如果（！textBox.value）{
textBox.value=转录本；
}
否则{
if（transcript.toLowerCase（）.trim（）=“go”）{
searchBar.submit（）；
}
else if（transcript.toLowerCase（）.trim（）=“重置”）{
searchBar.reset（）；
}
否则{
textBox.value=转录本；
}
}
名单（活动）；
}
}

正文{
边距：0！重要；
填充：0！重要；
/*身高：100%*/
溢出：隐藏；
}
.表格{
/*使用的图像*/
背景图片：url（“unsplash.jpg”）；
/*全高*/
身高：100%；
/*将图像居中并精确缩放*/
背景位置：中心；
/*背景重复：无重复*/
背景尺寸：封面；
文本对齐：居中；
垫面：10%；
}
段落{
颜色：白色；
填充：15px；
字体大小：30px；
字体系列：“Lexend Zetta”，无衬线；
}
.info{
颜色：白色；
字体系列：“Lexend Zetta”，无衬线；
}
输入{
宽度：50%；
身高：8%；
边界半径：5px；
背景色：黑色；
文本对齐：居中；
}
我{
最高：23%；
右：27%；
位置：绝对位置；
位置：固定；
}
/*搜索时将文本颜色更改为白色*/
输入，选择，选项{
颜色：白色；
字体大小：15px；
}

用语言搜索

历史记录：

使用媒体查询屏幕大小（@media only screen and（max width:…px））并在css中进行翻译

我不会给你一个直接的解决方法，去查一下，然后练习

-媒体查询

---

-Translate

您也可以使用flex box创建搜索文本框，该文本框本质上是响应性的，并且在-2分辨率不同的情况下从其位置取消对齐。有关更多说明，请参阅下面的示例

html，正文{
宽度：100%；
身高：100%；
}
.查册表格{
显示器：flex；
证明内容：中心；
对齐内容：居中对齐；
身高：100%；
宽度：100%；
}
.search div{
显示：内联flex；
边框：1px纯黑；
填充：10px；
}    
.搜索输入{
宽度：100%；
边界：0px；
}
输入：焦点，文本区域：焦点，选择：焦点{
大纲：无；
}
形式{
高度：适合的内容；
宽度：60%
}

用语言搜索

删除

i

标记的CSS，并将其替换为

i {
  margin-left: -2em;
  margin-top: 1em;
  position:absolute;
  color: white;
}

---

请参见

非常感谢..这很有帮助。请解释为什么分配页边距有效而不分配页边距图标将显示在输入字段旁边而不是输入字段内部。页边距与响应性无关。以前，您有一个绝对固定的顶部/左侧百分比值，该值计算到正文中