Material-UI：大屏下将标签页改为并列布局实现方案问询

Got it, let's tackle this responsive layout problem you're facing—switching between tabs on small screens and side-by-side divs on larger ones, just like the Material Design pattern you referenced. Here's a practical, no-fuss implementation using vanilla HTML, CSS, and a touch of JS that aligns with that design principle:

1. HTML Structure #

We'll build a container that holds both the tab navigation (for small screens) and a grid layout (for large screens). The content blocks are shared between both views to keep things DRY.

<div class="responsive-layout-container">
  <!-- Tab Navigation (visible on small screens only) -->
  <div class="mobile-tabs">
    <button class="tab-button active" data-target="content-1">Tab 1</button>
    <button class="tab-button" data-target="content-2">Tab 2</button>
  </div>

  <!-- Side-by-Side Container (visible on large screens only) -->
  <div class="desktop-grid">
    <div class="content-block active" id="content-1">
      <h3>First Section Content</h3>
      <p>This content appears in the first tab on mobile, and sits on the left side of the screen when there's enough space.</p>
    </div>
    <div class="content-block" id="content-2">
      <h3>Second Section Content</h3>
      <p>This content switches from the second tab on mobile to the right side of the screen for larger viewports.</p>
    </div>
  </div>
</div>

2. CSS Styling #

We'll use media queries to toggle visibility between the tab navigation and grid layout, plus basic styling to match Material Design's clean aesthetic.

/* Base Styles */
.responsive-layout-container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* Mobile-First: Tab View (default, <768px) */
.mobile-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.tab-button {
  padding: 0.8rem 1.2rem;
  border: none;
  border-radius: 4px;
  background-color: #e0e0e0;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s ease;
}

.tab-button.active {
  background-color: #1976d2;
  color: white;
}

.content-block {
  display: none;
  padding: 1.5rem;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.content-block.active {
  display: block;
}

.desktop-grid {
  display: none;
}

/* Desktop: Side-by-Side Grid View (>=768px) */
@media (min-width: 768px) {
  .mobile-tabs {
    display: none; /* Hide tab navigation on large screens */
  }

  .desktop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .content-block {
    display: block; /* Force all content blocks to show */
    box-shadow: none;
    padding: 0;
  }
}

3. JavaScript for Tab Functionality #

This handles the tab switching logic for small screens—super lightweight and straightforward.

// Get all tab buttons and content blocks
const tabButtons = document.querySelectorAll('.tab-button');
const contentBlocks = document.querySelectorAll('.content-block');

tabButtons.forEach(button => {
  button.addEventListener('click', () => {
    // Remove active state from all buttons and content
    tabButtons.forEach(btn => btn.classList.remove('active'));
    contentBlocks.forEach(block => block.classList.remove('active'));

    // Add active state to clicked button and matching content
    button.classList.add('active');
    const targetContent = document.getElementById(button.dataset.target);
    targetContent.classList.add('active');
  });
});

Quick Notes #

• You can adjust the media query breakpoint (768px) to match Material Design's official breakpoints (like 960px for desktop) if needed.
• If you're using a framework like Material UI, you can replace the vanilla JS with the framework's built-in Tabs component, and use their Grid component for the desktop layout—same core logic, just wrapped in framework-specific tools.
• This implementation ensures a smooth transition between views without any jarring layout shifts, which aligns with Material Design's responsive guidelines.

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