设置width:100%无效，求解决个人作品集网站响应式问题

• 添加视口元标签
  这是移动端适配的核心前提，必须在HTML的<head>中加入：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

  没有这个标签时，移动浏览器会默认按桌面宽度渲染页面，只有手动缩小才能适配，这正是你当前遇到的问题。

• 调整容器宽度规则

  • 不要给页面容器设置固定宽度（比如width: 1200px），改用max-width: 1200px + width: 100%，让容器在大屏幕保持最大宽度，小屏幕自动收缩。
  • 检查是否设置了min-width限制容器缩小，这会导致小屏幕出现横向滚动条，需要移除或调整。

• 用媒体查询做针对性布局优化
  针对不同屏幕尺寸调整样式，比如在768px以下的移动端，把导航改成垂直排列、项目卡片占满屏幕宽度：

  @media (max-width: 768px) {
    .nav-links {
      flex-direction: column;
      gap: 1rem;
    }
    .project-card {
      width: 100%;
      margin-bottom: 1.5rem;
    }
  }
  

• 重置全局基础样式
  给所有元素添加基础重置，避免浏览器默认样式导致的内容溢出：

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  

  box-sizing: border-box能让元素的内边距和边框不会额外增加宽度，防止内容超出容器范围。

内容的提问来源于stack exchange，提问作者Caspian Musk