开创者教程
首页
前端开发
后端开发
数据库
数据分析
开发工具
Git 教程
SVN 教程
SEO 教程
测验/考试
代码笔记
登录/注册
🎁 机器学习（ML）是AI的核心驱动力！全面、实用的 机器学习（ML）教程 现已正式上线
👉 点击学习
实例代码
下载
重置
运行代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>开创者教程(kaicz.com)</title> <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%; } .main { background-color: #f1f1f1; padding: 20px; float: left; width: 60%; } .right { background-color: #04AA6D; padding: 20px; float: left; width: 20%; } /* 宽度低于800像素时，该媒体启用 */ @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>在调整这个框架大小时，确保你达到 800 像素的断点。</p> <div class="left"> <p>左菜单</p> </div> <div class="main"> <p>内容模块</p> </div> <div class="right"> <p>右菜单</p> </div> </body> </html>
运行结果：
