如何实现父div内子元素固定宽度 不受页面缩放及屏幕尺寸影响

你当前代码中元素宽度随页面尺寸变化的核心原因，是使用了百分比、min()这类相对于父级/视口动态计算的长度单位。要实现「320px屏幕基准下设定宽度后，无论屏幕尺寸增大多少，元素宽度始终保持不变」的效果，直接给目标元素设置固定像素宽度即可，不需要使用任何相对长度单位。

修改要点 #

• 移除父容器.service-info上的width: min(95%, 70rem)动态宽度规则，直接写入你需要的固定像素值。如果要匹配320px屏幕基准下的满宽效果，直接设为width: 320px即可
• 子元素<p>上的width: 50%是相对父容器宽度的百分比值，如果你需要子元素也完全固定宽度，把这个值替换为对应固定像素值即可，比如320px父宽下的50%就是160px
• 保留margin: 0 auto规则即可让固定宽度的元素在大屏下自动居中，不会改变元素本身的固定宽度
• 不要给目标元素加max-width/min-width规则，避免覆盖固定宽度设置；如果父级用了flex/grid布局，记得关闭拉伸相关属性（比如align-items: stretch）

修改后完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
.service-info p {
  padding: 100px 0;
  font-weight: 500;
  color: red;
  /* 替换百分比为固定像素值，按需调整数值即可 */
  width: 160px;
  margin: 0 auto;
}

.service-info {
  text-align: center;
  position: relative;
  /* 替换动态计算宽度为固定像素值 */
  width: 320px;
  /* 大屏下容器居中 */
  margin: 0 auto;
}
</style>
<body>
  <div class="service-info">
    <h1>services</h1>
    <p>lorem ipsum randomaora ni salisum pumm.lorem ipsum randomaora ni salisum pumm.lorem ipsum randomaora ni salisum pumm.lorem ipsum randomaora ni salisum pumm.lorem ipsum randomaora ni salisum pumm.lorem ipsum randomaora ni salisum pumm.</p>
  </div>
</body>
</html>

如果你不确定320px视口下元素原本的宽度是多少，可以打开浏览器开发者工具切换到320px视口模式，选中目标元素在计算样式面板读取实际渲染的宽度值，把这个数值直接写到width属性里，就能完全匹配你要的基准宽度效果。设置完成后不管怎么拉伸浏览器窗口，元素宽度都不会发生变化。

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