如何根据屏幕/容器尺寸动态调整CSS中div元素的left定位值？

首先修正你代码里的语法错误，HTML中class属性的正确写法是class="products"，正确结构如下：

<div class="products">
  <div class="star"></div>
</div>

下面提供几种让left值随容器/屏幕尺寸自适应调整的实用方法：

方法1：使用百分比单位 #

将固定像素值替换为百分比，百分比是基于父容器（.products）的宽度计算的，能自动跟随容器尺寸变化：

.products {
  position: relative; /* 必须设置，让子元素的定位基准为父容器 */
}
.star {
  position: absolute; /* 配合left属性需设置定位方式 */
  left: 2%; /* 相对于父容器宽度的2%，可根据需求调整比例 */
}

方法2：结合CSS变量与媒体查询 #

如果需要在不同屏幕尺寸下设置差异化的相对位置，用CSS变量配合媒体查询能灵活控制：

.products {
  position: relative;
}
.star {
  position: absolute;
  --star-left: 10px;
  left: var(--star-left);
}

/* 小屏设备（宽度≤768px）调整位置 */
@media (max-width: 768px) {
  .star {
    --star-left: 5px;
  }
}

/* 大屏设备（宽度≥1200px）调整位置 */
@media (min-width: 1200px) {
  .star {
    --star-left: 15px;
  }
}

方法3：使用rem单位 #

rem基于根元素（<html>）的字体大小计算，给根元素设置响应式字体大小后，rem值会自动适配屏幕：

html {
  font-size: 16px; /* 默认字体基准 */
}

/* 小屏时缩小根字体 */
@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

.products {
  position: relative;
}
.star {
  position: absolute;
  left: 0.625rem; /* 10px ÷ 16px = 0.625rem，随根字体大小变化 */
}

方法4：用Flexbox/Grid布局替代定位 #

如果不需要依赖left属性，可通过布局方式实现自适应位置，比如用Flexbox的内边距控制：

.products {
  display: flex;
  align-items: center;
  padding-left: 2%; /* 用内边距控制星级起始位置，自动适配容器宽度 */
}
.star {
  /* 无需设置left，靠父容器padding定位 */
}

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