主页
HTML
HTML 响应式 Web 设计
tryhtml_responsive_media_query
运行 ❯
×
更改方向
保存代码
更改主题
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { box-sizing:border-box; } .left { background-color:#2196F3; padding:20px; float:left; width:20%; /* The width is 20%, by default */ } .main { background-color:#f1f1f1; padding:20px; float:left; width:60%; /* The width is 60%, by default */ } .right { background-color:#4CAF50; padding:20px; float:left; width:20%; /* The width is 20%, by default */ } /* Use a media query to add a break point at 800px: */ @media screen and (max-width:800px) { .left, .main, .right { width:100%; /* The width is 100%, when the viewport is 800px or smaller */ } } </style> </head> <body> <h2>媒体查询</h2> <p>调整浏览器窗口的大小。</p> <p>确保在调整此框架大小时到达 800px 处的断点。</p> <div class="left"> <p>左侧菜单</p> </div> <div class="main"> <p>主要内容</p> </div> <div class="right"> <p>右侧的内容</p> </div> </body> </html>