移动端页面布局优化：900px断点适配与社交图标固定实现方法

调整方案 #

你只需要修改CSS部分的代码即可，HTML结构无需改动，具体修改如下：

1. 将原有媒体查询的断点从946px调整为你要求的900px
2. 在媒体查询内新增三个核心区域的定位规则，实现需求效果

修改后的完整CSS代码

aside {
  display: flex;
}

aside div.contact-ways {
  position: absolute;
  top: 30%;
}

aside div.name-container {
  position: absolute;
  top: 30%;
  left: 15%;
}

aside div.explanation-container {
  position: absolute;
  top: 30%;
  left: 50%;
}

.contact-icon {
  position: relative;
  width: 50px;
  height: 50px;
  left: 0px;
}

.contact-icon:hover {
  left: 20px;
  transition: ease-in-out 0.4s;
}

.contact-ways article {
  background-color: wheat;
  width: 50px;
  height: 50px;
  display: block;
}

.contact-ways article:hover {
  width: 70px;
  height: 50px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  transition: ease-in-out 0.4s;
}

.name-content {
  position: absolute;
  width: 40%;
  display: block;
}

.name-content ul li {
  list-style-type: none;
  color: rgb(158, 50, 50);
  font-family: "Helvetica Neue", sans-serif;
  font-size: 60px;
  font-weight: bold;
  text-align: left;
  text-shadow: -1px -1px 0px rgb(97, 50, 50), 3px 3px 0px rgb(58, 39, 39), 6px 6px 0px black;
}

.name-content ul li:hover {
  font-size: 75px;
  color: rgb(31, 186, 224);
  transition: ease-in-out 0.5s;
  text-shadow: -1px -1px 0px rgb(11, 109, 60), 3px 3px 0px rgb(28, 77, 52), 6px 6px 0px rgb(42, 61, 52);
  display: inline;
}

.name-content ul li:nth-child(1):before {
  content: "FirstName";
}

.name-content ul li:nth-child(1):hover:before {
  content: "About";
}

.name-content ul li:nth-child(2):before {
  content: "LastName";
}

.name-content ul li:nth-child(2):hover:before {
  content: "Todo";
}

.name-content ul li:nth-child(3):before {
  content: "LastName2";
}

.name-content ul li:nth-child(3):hover:before {
  content: "Contact";
}

.explanation-container {
  position: absolute;
  width: 35%;
  text-align: left;
}

/* 以下为修改的媒体查询部分 */
@media only screen and (max-width: 900px) {
  /* 社交图标改为固定定位，滚动时位置不变 */
  aside div.contact-ways {
    position: fixed;
    top: 30%;
    left: 0;
    z-index: 999; /* 保证社交图标不被其他内容遮挡 */
  }
  /* 调整姓名区域位置，给社交图标留出左侧空间 */
  aside div.name-container {
    left: 20%;
    top: 30%;
  }
  /* 修复姓名区域高度塌陷问题 */
  .name-content {
    position: relative;
    width: 100%;
  }
  /* 说明文本调整到姓名区域下方，和姓名左对齐 */
  aside div.explanation-container {
    position: absolute;
    top: calc(30% + 300px); /* 300px为姓名区域大致高度，可根据实际效果调整 */
    left: 20%;
    width: 70%; /* 小屏下加宽文本区域，提升可读性 */
  }
}

补充说明

如果说明文本和姓名区域的间距不符合预期，可调整top: calc(30% + 300px)里的300px数值，增大数值间距变大，减小数值间距变小。

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