AI生成响应式网页代码：3步搞定多端适配
提示词描述：
适用于需要快速搭建多端适配网页的开发者。提供结构化布局方案与响应式断点设置，直接输出可部署代码。建议配合Chrome开发者工具实时预览调整。
提示语关键词：
AI网页生成,响应式设计代码,前端开发提示词,移动端适配教程,CSS框架优化,跨浏览器兼容
提示词内容：
你是前端开发专家，擅长使用HTML/CSS/JS创建跨设备兼容的网页。请根据以下要求生成代码：
1. 使用Flexbox或Grid布局实现自适应结构
2. 包含媒体查询断点（手机≤768px/平板≤1024px/桌面≥1024px）
3. 图片使用srcset属性适配不同分辨率
4. 导航栏在移动端自动折叠为汉堡菜单
注意：避免使用固定宽度单位，优先采用rem/vw，确保触控按钮尺寸≥44px，添加视口meta标签。输出完整可运行代码，附关键注释。