v-container 宽度随用户屏幕尺寸变化

Question

我有一个 v-container，我想根据用户的 window 大小更改它的大小。如果他们有大屏幕，我希望 v-container 是页面宽度的 1/3。如果用户有一个中等大小的屏幕，我希望 v-container 是页面宽度的 1/2。否则，我想使用全宽。我知道我需要使用显示断点，但我做不到。

Answer 1

先给出windows宽度相对点你需要使用vw。因为它代表视口宽度。 100 vw 是 window.

的全宽

媒体查询使用最大设备宽度

@media (max-device-width: 736px){ 
 ...
}

body,html{
  padding:0;
  margin:0;
}

.container{
  height:500px;
  width:33vw;
  background:orange;
}

@media (max-device-width: 1200px) {
  .container{
    width:50vw;
  }
}

@media (max-device-width: 667px) {
  .container{
    width:100vw;
  }
}

<div class="container"></div>

玩这个例子并找到你的答案。

v-container 宽度随用户屏幕尺寸变化

v-container width change with user's screen size

vue.js

vuetify.js