Javascript 如何使当前代码响应？

问题：我想让我当前的代码具有响应性，以便它适用于所有人，如手机、平板电脑等。。这基本上就是我想要完成的全部。我想让它具有响应性的原因是，它适合多种设备的所有不同屏幕尺寸。此外，我想知道我是否可以对代码进行任何改进，以提高效率或专业性

函数logOptions（）{
var s=document.getElementsByName（'Interests'）[0]；
var text=s.options[s.selectedIndex].text；
console.log（文本）；
}
函数logEmail（）{
console.log（document.getElementById（'email'）.value）；
}
函数myFunction（）{
logOptions（）；
logEmail（）；
}
document.getElementById（'inputform'）。addEventListener（'submit'，函数（e）{
//e.preventDefault（）；将其添加到电子邮件日志中，并在浏览器控制台中选择菜单值
logOptions（）；
logEmail（）；
});
/*网页主体的样式*/
身体{
背景色：#000639
}
/*h2的样式*/
氢{
颜色：#FFFFFF；
字体大小：24px；
字体系列：Helvetica；
位置：固定；
左：350px；
}
/*h4的造型*/
h4{
颜色：#FFFFFF；
字体大小：20px；
字体系列：Helvetica；
字体重量：较轻；
左：350px；
位置：固定；
底部：445px；
}
/*输入字段按钮的样式*/
输入[类型=电子邮件]{
字体大小：16px；
边界半径：7px；
宽度：315px；
高度：45px；
字体系列：Helvetica；
字体重量：较轻；
位置：固定；
左：350px；
底部：400px；
}
/*立即注册提交按钮的样式设置*/
钮扣{
背景色：#5c6ac4；
位置：固定；
左：351px；
底部：320px；
宽度：540px；
高度：55px；
边界半径：7px；
字体系列：Helvetica；
字体大小：16px；
颜色：#FFFFFF；
字体大小：粗体；
}
/*选项菜单的样式*/
挑选{
字体大小：16px；
宽度：200px；
高度：50px；
字体系列：Helvetica；
字体重量：较轻；
左边距：340px；
颜色：#7b；
位置：固定；
底部：400px；
}
/*造型*/
形式{
位置：固定；
左：350px；
底部：420px；
}
/*矩形的样式*/
svg{
位置：固定；
底部：440px；
右：628px；
}
/*电子邮件占位符的样式*/
输入：：占位符{
颜色：#7b；
}
#谢谢{
字体系列：Helvetica；
字体大小：粗体；
位置：固定；
底部：470px；
}
#提示{
字体系列：Helvetica；
位置：固定；
底部：430px；
}

Shopify前端开发实习生
通过Shopify的时事通讯了解最新的电子商务趋势

订阅免费营销技巧
现在就报名吧
对……感兴趣。。
营销
选择2
选择3
选择4
如果要修复任何类型的屏幕分辨率，请不要使用px，而是使用%。
我已经学会了如何创建一个网站，但忘记了其中的一些
 使您的代码具有响应性意味着您需要对css有一些了解。要做到这一点，您可以使用媒体查询，例如

@media only screen and (max-width: 320px){
}

上面的代码表示，当屏幕最大宽度为320px时，媒体查询中的所有css代码都将是网站的活动css代码。
因此，您可以对css代码执行以下操作：

body {
  background-color: #000639
}

/* styling for h2 */

h2 {
  color: #FFFFFF;
  font-size:24px;
  font-family: Helvetica;
  position: fixed;
  left: 350px;
}
@media only screen and (max-width: 320px){
/* styling for h2 */
        h2 {
      color: #FFFFFF;
      font-size:24px;
      font-family: Helvetica;
      position: fixed;
      left: 350px;
    }
   }

因此，您必须在媒体查询下编辑h2的css代码，以确保每次屏幕大小减小到该大小时，所有元素都将自动调整以适应您将设计的屏幕。
有关媒体查询的更多信息，请访问此处的“学习响应式设计”，您将找到一门关于响应式设计的课程，我认为这将提供一些见解
 你的问题很难回答，因为有不同的观点


您可以手动构建响应性css和html，并学到很多东西。这是最好的解决办法。例如，您需要了解媒体查询和大量技巧
你可以使用一个框架来解决最重要的事情，这是一个懒惰的解决方案。我的建议是使用，但也可以使用任何其他方法。我选择这个是因为它很简单。阅读文档，深入了解网格系统的工作原理。有了它，您将能够解决大多数常见的响应问题
如果你不想学习任何东西，只要垂直思考你的代码，如果可能的话，一列，避免固定宽度，等等。这不是不可能的
要使其响应，请不要使用
位置：fixed
。使用媒体查询和相对定位