如何实现小屏占满视口宽度、大屏仅占50%的响应式布局？

你的问题核心是固定百分比宽度的布局未适配移动端，可以通过CSS媒体查询实现响应式调整，具体方案如下：

基础修复方案（直接适配移动端） #

在原有CSS基础上添加媒体查询，针对小屏幕调整宽度：

.content{
  margin:auto;
  width:50%;
  height:100vh;
  background-color:black;
}

/* 屏幕宽度≤768px时生效（可根据需求调整阈值） */
@media (max-width: 768px) {
  .content {
    width: 100%; /* 占满移动端屏幕宽度，移除左右空白 */
    margin: 0; /* 清除自动外边距，避免细微间距 */
  }
}

说明 #

• 媒体查询@media (max-width: 768px)是移动端常用断点，你可以根据实际需求修改数值（比如改成600px适配更小的手机）。
• 当屏幕缩小到阈值以下时，内容会自动占满整个宽度，彻底解决显示空间不足的问题。

进阶优化：更灵活的响应式布局 #

如果希望PC端内容有最大宽度限制，同时移动端保留适度留白（避免内容贴边），可以调整基础样式：

.content{
  margin:auto;
  max-width: 1200px; /* 限制PC端内容最大宽度 */
  width: 90%; /* 小屏幕先占90%宽度，保留舒适留白 */
  height:100vh;
  background-color:black;
}

/* 屏幕宽度≥1200px时，切换为50%宽度布局 */
@media (min-width: 1200px) {
  .content {
    width: 50%;
  }
}

这种写法既保留了PC端的居中窄布局，又让移动端体验更友好。

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