Add matchMedia API integration to responsive-design workload in experimental folder

[Copilot]

This PR implements a comprehensive responsive design workload that integrates the matchMedia API to test responsive design performance scenarios in Speedometer.

🎯 Implementation Overview

The new workload is located at /experimental/responsive-design/ and provides:

• matchMedia API Integration: Tests performance of media query matching across common breakpoints
• Performance Measurement: Tracks media query evaluation time, layout recalculation, and style application changes
• Realistic Scenarios: Simulates responsive design patterns that real websites encounter

📱 Responsive Breakpoints

The workload tests three main breakpoints:

• Mobile: (max-width: 480px)
• Tablet: (min-width: 481px) and (max-width: 768px)
• Desktop: (min-width: 769px)
• Orientation: Portrait/Landscape detection

⚡ Performance Features

Media Query Listeners

const mediaQuery = window.matchMedia('(max-width: 768px)');
mediaQuery.addListener(handleMediaQueryChange);

Performance Measurement

• Media query evaluation timing using performance.now()
• Layout recalculation measurement with forced reflows
• Style application timing with CSS transitions
• PerformanceObserver integration for advanced metrics

Dynamic Style Updates

The workload triggers realistic layout changes based on media query matches:

// Measure layout recalculation performance
const startTime = performance.now();
element.offsetHeight; // Force layout
const endTime = performance.now();

🏗️ Architecture

The workload consists of three main components:

1. ResponsiveEngine (src/responsive-engine.js): Core matchMedia API integration with event listeners
2. PerformanceMonitor (src/performance-monitor.js): Advanced performance tracking using modern browser APIs
3. ResponsiveDesignApp (src/app.js): Main orchestration and UI interaction layer

🎮 Interactive Testing

• Real-time viewport information display
• Performance metrics visualization
• Test control buttons for different scenarios
• Keyboard shortcuts (Ctrl+1/2/3 for viewports, Ctrl+T for tests)
• Continuous background monitoring every 5 seconds

🧪 Testing & Validation

• All JavaScript files pass syntax validation
• CSS contains responsive media queries with proper breakpoints
• HTML structure includes all necessary interactive components
• Build system follows Speedometer project patterns
• HTTP server testing confirms full functionality

The workload successfully measures performance impacts of media query matching and responsive design changes, providing the realistic testing scenarios requested in the issue.

Fixes #25.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.