主页
CSS
CSS3 媒体查询
trycss3_media_queries2
运行 ❯
×
更改方向
保存代码
更改主题
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .wrapper {overflow: auto;} #main {margin-left: 4px;} #leftsidebar { float: none; width: auto; } #menulist { margin: 0; padding: 0; } .menuitem { background: #CDF0F6; border: 1px solid #d4d4d4; border-radius: 4px; list-style-type: none; margin: 4px; padding: 2px; } @media screen and (min-width: 480px) { #leftsidebar {width: 200px; float: left;} #main {margin-left: 216px;} } </style> </head> <body> <div class="wrapper"> <div id="leftsidebar"> <ul id="menulist"> <li class="menuitem">Menu-item 1</li> <li class="menuitem">Menu-item 2</li> <li class="menuitem">Menu-item 3</li> <li class="menuitem">Menu-item 4</li> <li class="menuitem">Menu-item 5</li> </ul> </div> <div id="main"> <h1>调整浏览器窗口大小查看效果！</h1> <p>此示例显示了一个菜单，如果视口宽度为 480 像素或更宽，该菜单将浮动到页面左侧。 如果视口小于 480 像素，菜单将位于内容之上。</p> </div> </div> </body> </html>