响应式设计和移动优先布局

本节目标：理解“响应式设计和移动优先布局”的核心思路，并能把它用于实际开发或面试表达。 响应式设计的目标是创建可以在各种设备和屏幕尺寸上自适应的网页。移动优先布局是一种设计策略，首先针对移动设备设计，然后逐步增强以适应更大的屏幕尺寸。

以下是一个示例，展示了如何使用移动优先策略和媒体查询来实现响应式设计： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Design Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>Responsive Design Example</h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <main> <section> <h2>Welcome to Our Website</h2> <p>This is a sample responsive webpage using mobile-first design and media queries.</p> </section> <aside> <h3>Side Content</h3> <p>This is some additional content that will be positioned differently based on the screen size.</p> </aside> </main> <footer> <p>© 2024 Responsive Design Example</p> </footer> </body> </html>

CSS 文件（styles.css） /* Mobile-first styles / body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header, nav, main, aside, footer { padding: 20px; margin: 10px; border: 1px solid #ccc; } header { background-color: #f4f4f4; text-align: center; } nav ul { list-style: none; padding: 0; display: flex; flex-direction: column; align-items: center; background-color: #333; } nav ul li { margin: 5px 0; } nav ul li a { color: white; text-decoration: none; padding: 10px 15px; display: block; } nav ul li a:hover { background-color: #575757; } main { display: flex; flex-direction: column; } main section, main aside { flex: 1; min-width: 100%; } footer { text-align: center; background-color: #f4f4f4; } / Media Queries / / Tablets in landscape and larger / @media (min-width: 768px) { nav ul { flex-direction: row; justify-content: center; } main { flex-direction: row; } main section, main aside { min-width: 50%; } } / Desktops and larger screens */ @media (min-width: 1024px) { body { margin: 0 auto; max-width: 1200px; } header { text-align: left; } nav ul { justify-content: flex-start; } main { flex-direction: row; justify-content: space-between; } main section { flex: 3; min-width: 60%; } main aside { flex: 1; min-width: 30%; } }

解释

• 移动优先样式：默认情况下，样式针对移动设备进行了优化。导航栏的列表项垂直排列，主内容和侧边栏垂直排列，页面内容占据100%的宽度。
• 媒体查询：
• 平板设备及以上（最小宽度 768px）：调整导航栏的布局，使导航项水平排列，并且主内容和侧边栏横向排列，分别占据50%的宽度。
• 桌面设备及以上（最小宽度 1024px）：进一步优化布局，使内容在更大屏幕上展示更好，同时限制页面的最大宽度，调整文本对齐方式和内容间距。主内容区域占据60%的宽度，侧边栏占据30%的宽度。 通过这种移动优先设计和媒体查询，可以确保网页在各种设备和屏幕尺寸上都有良好的用户体验。