Javascript 响应库Vue.js

大家晚上好，我正在做一个公文包页面，您需要根据窗口大小调整vue.js上的块大小

图像中的平铺应始终为方形，调整大小时，它可能会减小（到某个大小），或者一行中的平铺数量会发生变化。我不知道怎么做

下面我将展示我所做的整个布局，也许它需要改变。我想马上澄清，我只理解网页设计，所以布局和代码本身可能并不完美

window.addEventListener（'load'，（）=>{
const loadPhoto=新的Vue({
el:“#应用程序”，
数据：{
照片：[
{name:'photo1'，url:'assets/plate photo/plate_one.jpg'}，
{name:'photo2'，url:'assets/plate photo/plate_two.jpg'}，
{name:'photo3'，url:'assets/plate photo/plate_three.jpg'}，
{name:'photo4'，url:'assets/plate photo/plate_four.jpg'}，
{name:'photo5'，url:'assets/plate photo/plate_-five.jpg'}，
{name:'photo6'，url:'assets/plate photo/plate_six.jpg'}，
{name:'photo7'，url:'assets/plate photo/plate_seven.jpg'}，
{name:'photo5'，url:'assets/plate photo/plate_eate.jpg'}，
{name:'photo6'，url:'assets/plate photo/plate_nine.jpg'}，
{name:'photo7'，url:'assets/plate photo/plate_ten.jpg'}，
{name:'photo1'，url:'assets/plate photo/plate_one.jpg'}，
{name:'photo2'，url:'assets/plate photo/plate_two.jpg'}，
{name:'photo3'，url:'assets/plate photo/plate_three.jpg'}，
{name:'photo4'，url:'assets/plate photo/plate_four.jpg'}，
{name:'photo5'，url:'assets/plate photo/plate_-five.jpg'}，
{name:'photo6'，url:'assets/plate photo/plate_six.jpg'}，
{name:'photo7'，url:'assets/plate photo/plate_seven.jpg'}，
{name:'photo5'，url:'assets/plate photo/plate_eate.jpg'}，
{name:'photo6'，url:'assets/plate photo/plate_nine.jpg'}，
{name:'photo7'，url:'assets/plate photo/plate_ten.jpg'}，
{name:'photo1'，url:'assets/plate photo/plate_one.jpg'}，
{name:'photo2'，url:'assets/plate photo/plate_two.jpg'}，
{name:'photo3'，url:'assets/plate photo/plate_three.jpg'}，
{name:'photo4'，url:'assets/plate photo/plate_four.jpg'}，
{name:'photo5'，url:'assets/plate photo/plate_-five.jpg'}，
{name:'photo6'，url:'assets/plate photo/plate_six.jpg'}，
{name:'photo7'，url:'assets/plate photo/plate_seven.jpg'}，
{name:'photo5'，url:'assets/plate photo/plate_eate.jpg'}，
{name:'photo6'，url:'assets/plate photo/plate_nine.jpg'}，
{name:'photo7'，url:'assets/plate photo/plate_ten.jpg'}，
{name:'photo1'，url:'assets/plate photo/plate_one.jpg'}，
{name:'photo2'，url:'assets/plate photo/plate_two.jpg'}，
{name:'photo3'，url:'assets/plate photo/plate_three.jpg'}，
{name:'photo4'，url:'assets/plate photo/plate_four.jpg'}，
{name:'photo5'，url:'assets/plate photo/plate_-five.jpg'}，
{name:'photo6'，url:'assets/plate photo/plate_six.jpg'}，
{name:'photo7'，url:'assets/plate photo/plate_seven.jpg'}，
{name:'photo5'，url:'assets/plate photo/plate_eate.jpg'}，
{name:'photo6'，url:'assets/plate photo/plate_nine.jpg'}，
{name:'photo7'，url:'assets/plate photo/plate_ten.jpg'}，
{name:'photo1'，url:'assets/plate photo/plate_one.jpg'}，
{name:'photo2'，url:'assets/plate photo/plate_two.jpg'}，
{name:'photo3'，url:'assets/plate photo/plate_three.jpg'}，
{name:'photo4'，url:'assets/plate photo/plate_four.jpg'}，
{name:'photo5'，url:'assets/plate photo/plate_-five.jpg'}，
{name:'photo6'，url:'assets/plate photo/plate_six.jpg'}，
{name:'photo7'，url:'assets/plate photo/plate_seven.jpg'}，
{name:'photo5'，url:'assets/plate photo/plate_eate.jpg'}，
{name:'photo6'，url:'assets/plate photo/plate_nine.jpg'}，
{name:'photo7'，url:'assets/plate photo/plate_ten.jpg'}，
{name:'photo1'，url:'assets/plate photo/plate_one.jpg'}，
{name:'photo2'，url:'assets/plate photo/plate_two.jpg'}，
{name:'photo3'，url:'assets/plate photo/plate_three.jpg'}，
{name:'photo4'，url:'assets/plate photo/plate_four.jpg'}，
{name:'photo5'，url:'assets/plate photo/plate_-five.jpg'}，
{name:'photo6'，url:'assets/plate photo/plate_six.jpg'}，
{name:'photo7'，url:'assets/plate photo/plate_seven.jpg'}，
{name:'photo5'，url:'assets/plate photo/plate_eate.jpg'}，
{name:'photo6'，url:'assets/plate photo/plate_nine.jpg'}，
{name:'photo7'，url:'assets/plate photo/plate_ten.jpg'}，
]
},
});
});
@介质（最大宽度：500px）{
.导航包裹{
显示：无；
}
.导航包装箱{
不透明度：1；
}
}
* {
保证金：0；
填充：0；
字体系列：“无衬线工作”，无衬线；
用户选择：无；
}
.内容填充{
右边填充：20px；
}
.包裹身体{
显示器：flex；
}
.包裹身体。导航包裹{
宽度：400px；
高度：100vh；
背景色：#242b2e；
盒影：0px 4px 20px#3d3d；
z指数：100；
位置：粘性；
排名：0；