Labjs实验页面响应式适配：HTML/CSS调整刺激物尺寸

一、响应式页面适配调整 #

先修正你现有CSS的语法错误，再替换固定单位为相对单位，实现屏幕自适应：

1. 修复语法问题 #

• .cons_left 选择器漏了开头的点，改为 .cons_left
• .message 中 position: absolute 后缺少分号，且调整为居中写法：margin: 20% auto;

2. 替换固定单位为相对单位 #

把所有固定像素（px）替换为视窗单位（vw/vh）或百分比，确保元素随屏幕尺寸自动缩放：

• 字体大小：将 70px 改为 5vw，50px 改为 3.5vw（可根据实际视觉效果微调）
• 间距：将 margin-top: 450px 改为 margin-top: 30vh，避免小屏幕内容溢出
• 刺激物尺寸：给 .pickimage 添加相对宽度限制，保证在不同屏幕下适配

修改后的完整CSS代码 #

/* Please define your custom styles here */

.cons_left {
  margin-left: 10%;
  margin-right: 10%;
} 

.pickparent {
  position: relative;
  top: 0;
  left: 0;
  /* 卡片容器用相对尺寸，比如占视窗宽度的80% */
  width: 80vw;
  max-width: 900px;
  height: 50vh;
  max-height: 600px;
  margin: 0 auto;
  // border: 3px solid black;
} 

.pickpicker {
  position: relative;
  top: 0;
  left: 0;
  /* 初始矩形尺寸，可调整 */
  width: 20vw;
  height: 15vh;
  background: #ccc;
  // border: 3px solid red;
} 

.pickimage {
  filter: grayscale(100%);
  position: absolute;
  margin: auto;
  z-index: 2;
  /* 响应式图片尺寸 */
  width: 60vw;
  max-width: 700px;
  height: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
 // border: 3px solid red;
} 

#location_percentage, #color_percentage {
  font-size: 5vw;
  text-align: center;
  display: block;
  margin: 0 auto;
}

.feedback, .percentage {
  font-size: 5vw;
  text-align: center;
}

.feedback {
  font-size: 5vw;
  margin-top: 30vh;
  display: block;
  line-height: 1.2;
}

.feedback:first-line {
  font-size: 5vw;
  margin-top: 5vh;
  display: block;
  line-height: 1.5;
}

.percentage {
  margin-top: 2vh;
  margin-bottom: 2vh;
}

#next-button {
    display: none;
    align-items: center;
    margin: 5vh auto;
  }

.message {
  font-size: 3.5vw;
  text-align: center;
  position: absolute;
  margin: 20% auto;
  left: 0;
  right: 0;
}

二、实现矩形缩放至卡片大小的交互任务 #

需要结合JavaScript监听用户操作，调整矩形尺寸并判断是否匹配卡片大小，示例代码如下：

// 获取元素
const pickparent = document.querySelector('.pickparent');
const pickpicker = document.querySelector('.pickpicker');
const nextButton = document.getElementById('next-button');
const feedback = document.querySelector('.feedback');

// 卡片的参考尺寸（从容器获取）
const cardWidth = pickparent.offsetWidth;
const cardHeight = pickparent.offsetHeight;

// 缩放阈值（允许小范围误差）
const tolerance = 5; // 单位：px

// 监听鼠标滚轮事件实现缩放
pickpicker.addEventListener('wheel', function(e) {
  e.preventDefault();
  
  // 获取当前矩形尺寸
  let currentWidth = pickpicker.offsetWidth;
  let currentHeight = pickpicker.offsetHeight;
  
  // 滚轮方向控制缩放比例
  const scaleFactor = e.deltaY > 0 ? 0.9 : 1.1;
  
  // 更新尺寸
  pickpicker.style.width = `${currentWidth * scaleFactor}px`;
  pickpicker.style.height = `${currentHeight * scaleFactor}px`;
  
  // 检查是否匹配卡片尺寸
  checkMatch();
});

// 检查尺寸匹配函数
function checkMatch() {
  const pickerWidth = pickpicker.offsetWidth;
  const pickerHeight = pickpicker.offsetHeight;
  
  // 判断是否在误差范围内匹配
  if (Math.abs(pickerWidth - cardWidth) <= tolerance && Math.abs(pickerHeight - cardHeight) <= tolerance) {
    feedback.textContent = '尺寸匹配成功！';
    nextButton.style.display = 'flex';
  } else {
    feedback.textContent = '';
    nextButton.style.display = 'none';
  }
}

使用说明 #

1. 将上述JS代码添加到Lab.js实验的脚本部分（页面加载完成后执行）
2. 可根据需求修改.pickpicker的初始样式（比如背景色）让用户清晰看到矩形
3. 调整缩放阈值tolerance或缩放速度scaleFactor适配实验需求

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