网页布局在不同屏幕显示不一致问题咨询（附HTML代码）

Hey there! Let's tackle that responsive layout inconsistency you're facing. Here's a structured, practical solution to make your design consistent across all screen sizes:

First, let's clean up and format your existing HTML code for clarity:

<div class="firstDiv"></div> 
<div class="secondDiv"></div> 
<div class="loginDiv"> 
  <form> 
    <div class="row center"> 
      <i class="fa fa-user-circle"></i> 
    </div> 
    <div class="container"> 
      <input type="text" placeholder="Username" name="uname" required> 
      <input type="password" placeholder="Password" name="psw" required> 
      <button mat-button (click)="submit()">Login</button>
    </div>
  </form>
</div>

Now let's implement the key fixes to make this responsive:

1. Use CSS Flexbox/Grid for Adaptive Layouts #

Flexbox and Grid are designed to handle responsive spacing and alignment automatically. For your login form, we can use Flexbox to center it and ensure it scales properly:

/* Reset default browser styles to eliminate inconsistencies */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Make the login section take full viewport height and center content */
.loginDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 1rem; /* Prevent content touching screen edges on small devices */
}

/* Style the form container to be responsive */
.loginDiv .container {
  display: flex;
  flex-direction: column;
  gap: 1.2rem; /* Replace <br> with flexible spacing */
  width: 100%;
  max-width: 420px; /* Cap width on large screens */
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Style inputs and button for consistency */
.loginDiv input {
  padding: 0.9rem;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 1rem;
}

.loginDiv button {
  padding: 0.9rem;
  background-color: #1976d2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

2. Add Media Queries for Screen-Specific Tweaks #

Media queries let you adjust styles for specific screen widths, ensuring your layout works on mobile, tablet, and desktop:

/* Adjust for small screens (max 768px) */
@media (max-width: 768px) {
  .loginDiv .container {
    padding: 1.5rem;
    box-shadow: none;
  }
  
  .loginDiv input, .loginDiv button {
    font-size: 1.1rem;
  }
}

/* Adjust for large screens (min 1200px) */
@media (min-width: 1200px) {
  .loginDiv .container {
    max-width: 500px;
  }
}

3. Use Relative Units Instead of Fixed Values #

Replace px with relative units like rem or % so elements scale with the user's font settings and screen size:

• Use rem for font sizes, padding, and margins (1rem = 16px by default, but adapts if the user changes their base font)
• Use % or vw/vh for container dimensions when you want them to take a percentage of the screen

4. Normalize Component Styles (For Angular Material) #

Since you're using mat-button, ensure you're leveraging Angular Material's built-in responsive features:

• Make sure you've imported Angular Material's responsive modules if needed
• Avoid overriding Material component styles directly unless necessary—use their built-in classes for spacing and alignment

5. Test Across Viewports #

Use your browser's dev tools (Chrome DevTools, Firefox DevTools) to simulate different screen sizes. You can also test on real devices to catch edge cases like small mobile screens or large desktop monitors.

内容的提问来源于stack exchange，提问作者Anil