Question

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

＆＃13;

function logOptions() {
  var s = document.getElementsByName('Interests')[0];
  var text = s.options[s.selectedIndex].text;
  console.log(text);
}

function logEmail() {
  console.log(document.getElementById('email').value);
}

function myFunction() {
  logOptions();
  logEmail();
}

document.getElementById('inputform').addEventListener('submit', function(e) {
  // e.preventDefault(); add this to log the email and select menu values to the browser console
  logOptions();
  logEmail();
});

＆＃13;

/* styling for main body of webpage */

body {
  background-color: #000639
}


/* styling for h2 */

h2 {
  color: #FFFFFF;
  font-size: 24px;
  font-family: Helvetica;
  position: fixed;
  left: 350px;
}


/* styling for h4 */

h4 {
  color: #FFFFFF;
  font-size: 20px;
  font-family: Helvetica;
  font-weight: lighter;
  left: 350px;
  position: fixed;
  bottom: 445px;
}


/* styling for input field button */

input[type=email] {
  font-size: 16px;
  border-radius: 7px;
  width: 315px;
  height: 45px;
  font-family: Helvetica;
  font-weight: lighter;
  position: fixed;
  left: 350px;
  bottom: 400px;
}


/* styling for sign up now submit button */

button {
  background-color: #5c6ac4;
  position: fixed;
  left: 351px;
  bottom: 320px;
  width: 540px;
  height: 55px;
  border-radius: 7px;
  font-family: Helvetica;
  font-size: 16px;
  color: #FFFFFF;
  font-weight: bold;
}


/* styling for option menu */

select {
  font-size: 16px;
  width: 200px;
  height: 50px;
  font-family: Helvetica;
  font-weight: lighter;
  margin-left: 340px;
  color: #7B7B7B;
  position: fixed;
  bottom: 400px;
}


/* styling for form */

form {
  position: fixed;
  left: 350px;
  bottom: 420px;
}


/* styling for rectangle */

svg {
  position: fixed;
  bottom: 440px;
  right: 628px;
}


/* styling for email placeholder */

input::placeholder {
  color: #7B7B7B;
}

#thanks {
  font-family: Helvetica;
  font-weight: bold;
  position: fixed;
  bottom: 470px;
}

#tips {
  font-family: Helvetica;
  position: fixed;
  bottom: 430px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Shopify Frontend Developer Intern</title>
  <link rel="stylesheet" type="text/css" href="web.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

  <h2>Stay up to date with ecommerce trends <br>with Shopify's newsletter</h2>
  <h4>Subscribe for free marketing tips</h4>

  <!-- <div class="input form"> -->
  <form id="inputform" method="get" action="confirmation.html">
    <input id="email" type="email" placeholder="Email Address" required>
    <button type="submit" id="validate">Sign up now</button>
    <select name="Interests" required>
      <option value="" disabled selected>Interested in..</option>
      <option value="option1">Marketing</option>
      <option value="option2">Option2</option>
      <option value="option3">Option3</option>
      <option value="option4">Option4</option>
    </select>
  </form>

  <svg>
  <rect width="40" height="3" style="fill:lightgreen" />
  </svg>

</body>

</html>

＆＃13;

Answer 1

让您的代码响应将意味着您需要具备一些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代码，以确保每次屏幕尺寸缩小到该尺寸时，所有元素都将自动调整以适合您设计的屏幕。有关媒体查询的更多信息，请访问https://www.codecademy.com在这里学习响应式设计，您将找到有关响应式设计的课程，我认为这将提供一些见解。

Answer 2

如果您想修复任何类型的屏幕分辨率，请不要使用px，请改用％。我已经学会了如何创建一个网站，但忘记了其中的一些。

Answer 3

您的问题很难回答，因为有不同的观点。

您可以手动构建响应式css和html并学习很多东西。这是最好的解决方案。例如，你需要知道媒体查询，以及大量的技巧。
你可以使用一个解决最重要事情的框架，它是一个懒惰的解决方案。我的建议是使用bootstrap但可以是任何其他人。我选择这个因为它很容易。阅读文档并深入了解网格系统的工作原理。有了这个，您将能够解决最常见的响应问题。
如果您不想学习任何东西，只需垂直考虑您的代码，尽可能考虑一列，避免固定宽度等。这并非不可能。

如何使我当前的代码响应？

3 个答案: