如何认为我们的网站/组件是响应式的

问题描述 投票:0回答:1

所以我目前正在尝试制作响应式页脚,并且我想知道如何判断网站/组件是否响应,虽然我确实知道需要使用相对值,并且 @media 查询是更改布局的必须条件网站的。这是我的问题,

要进行多少次媒体查询? 3个够吗?屏幕 >1024px,平板电脑 >768,<768 for phone?

这是我目前的代码,我愿意接受建议,因为我目前仍在学习,但主要是我想知道这在开发人员眼中是否足够响应

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Footer Watch</title>
    <link rel="stylesheet" href="Test.css" />
  </head>
  <body>
    <footer class="footer">
      <div class="footer-section">
        <div class="footer-subscribe">
          <!-- TODO: Make it 2 Line, Responsive? -->
          <h1>Ready To Meet The Future?</h1>
          <div class="footer-subscription">
            <input
              class="footer-email"
              type="email"
              placeholder="Email Address"
            />
            <button class="footer-subscribe-button" onclick="ClickSubscribe()">
              Submit
            </button>
          </div>
        </div>
        <div class="footer-nav">
          <div class="footer-link">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Product</a>
            <a href="#">Contact Us</a>
          </div>
          <div class="footer-contact">
            <a href="#">Insta</a>
            <a href="#">Twitt</a>
            <a href="#">Wa</a>
            <a href="#">Fb</a>
          </div>
        </div>
      </div>
      <div class="footer-copyright">
        <hr />
        <span>Copyright By Watches</span>
      </div>
    </footer>
    <!-- TODO: Create JS -->
    <script>
      function ClickSubscribe() {
        alert("Button clicked!");
      }
    </script>
  </body>
</html>

CSS

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  height: 100vh;
  color: #0e100f;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.footer {
  width: 100%;
  background-color: #e7e7e7;
  padding: 40px 10% 40px;
}

.footer a {
  text-decoration: none;
  color: black;
}

.footer h1 {
  margin: 0px;
  font-size: 56px;
}

.footer-section {
  display: flex;
  justify-content: space-between;
}

.footer-subscribe {
  flex: 1;
  margin-right: 10px;
  gap: 3rem;
  border-right: 2px solid;
}

.footer-subscription {
  display: flex;
  margin-right: 3rem;
  margin-top: 1rem;
}

.footer-email {
  width: 60%;
  padding: 1rem;
  margin-right: 3rem;
  border: none;
  border-radius: 36px;
  box-sizing: border-box;
  outline: none;
}

.footer-subscribe-button {
  background-color: red;
  color: white;
  border: none;
  padding: 0px 2rem;
  font-size: 16px;
}

.footer-nav {
  flex: 1;
  display: flex;
}

.footer-link {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 10px;
  border-right: 2px solid;
}

.footer-contact {
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer-copyright {
  margin: 40px 0px;
  font-size: 12px;
  font-weight: bold;
}

.footer-copyright hr {
  border-top: 2.5px solid black;
}

@media (max-width: 768px) {
  .footer h1 {
    font-size: 36px;
  }

  .footer-subscribe {
    margin-right: 20px;
    border-right: 1px solid;
  }

  .footer-subscription {
    flex-direction: column;
  }

  .footer-email {
    width: 100%;
    margin: 0 0 1rem 0;
  }

  .footer-subscribe-button {
    width: 100%;
    padding: 1rem;
  }

  .footer-nav {
    flex-direction: row;
  }

  .footer-link {
    border-right: 1px solid;
    margin-right: 20px;
  }
}
html css responsive-design
1个回答
0
投票

作为前端开发者,我总是把媒体查询做到4分。

  1. 超过 1024 - 大桌面屏幕
  2. 900 和 1024 之间 - 小桌面屏幕
  3. 600 至 900 之间 - 平板电脑
  4. 小于600 - 手机

一般来说,当屏幕宽度大于 1024 时,我们需要将 max-width 限制为 1400 或 1600 或开发人员想要或在 Figma 中指示的值。

关于手机,我总是制作最小 320px 宽度的响应式 UI。

在这种情况下,所有响应式 UI 都可以很好地适应各种屏幕分辨率,并且看起来不错。

https://gallerai.ai

这是我使用 React/Redux 的最新项目,它具有完美的响应式 UI。

无论如何,这只是我的意见,我想分享我在前端响应式方面的经验。

© www.soinside.com 2019 - 2024. All rights reserved.