移动端自动响应导航栏

在HTML中，使用媒体查询来检测页面的宽度，如果宽度小于某个特定的宽度值，则将导航栏切换为响应式，并在移动设备上进行调整。

示例代码：

HTML

<nav class="navbar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav>

CSS

/* 默认样式 */ .navbar { display: flex; justify-content: space-between; padding: 1rem; }

/* 媒体查询 / @media screen and (max-width: 600px) { / 移动设备样式 */ .navbar { flex-direction: column; }

.navbar ul li { text-align: center; margin-bottom: 1rem; } }

以上代码会将导航栏在网页宽度小于600px时格式化为一列，并将条目居中对齐。在媒体查询中设置不同的CSS规则来对移动设备进行优化，以提供更好的用户体验。