vue页面，盒子大小固定，随着页面变小，盒子也随着变小，距离大于一个图片的宽度，盒子会变回原来的大小

你可以使用CSS的媒体查询和JavaScript来实现这个效果。具体步骤如下：

1.使用CSS的媒体查询，当页面宽度小于某个值时，改变盒子大小。

例如，假设盒子的class为box，盒子原来的宽度为200px，高度为100px，当页面宽度小于600px时，盒子宽度变为100px，高度变为50px。CSS代码如下：

.box {
  width: 200px;
  height: 100px;
}

@media screen and (max-width: 600px) {
  .box {
    width: 100px;
    height: 50px;
  }
}

2.使用JavaScript来监听页面宽度变化，当距离大于一个图片的宽度时，改变盒子大小为原来的大小。

例如，假设页面中有一个图片，图片宽度为100px，当页面宽度小于500px时，盒子大小会随着页面变小而变小，当页面宽度大于500px且距离大于一个图片的宽度时，盒子会变回原来的大小。JavaScript代码如下：

var box = document.querySelector('.box');
var img = document.querySelector('img');
var imgWidth = img.offsetWidth;

function resizeBox() {
  if (window.innerWidth > 500 && (window.innerWidth - box.getBoundingClientRect().left) > imgWidth) {
    box.style.width = '200px';
    box.style.height = '100px';
  } else {
    box.style.width = '100px';
    box.style.height = '50px';
  }
}

window.addEventListener('resize', resizeBox);
resizeBox();

这样，当页面宽度变化时，盒子大小也会随之变化，并且当距离大于一个图片的宽度时，盒子会变回原来的大小。