ウィンドウの大きさを一定以上小さくさせるとレスポンシブを効かなくさせ、スクロールで切れた画面を見せたい

Question

日本語が変で申し訳ないです。

<!--typescript + vuejs + vue-class-component-->

<template>
  <div class="window">

    <div class="rectangle">


    </div>

  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component({
  components: {}
})
export default class Window extends Vue {

}
</script>

<style lang="scss">

.window{
    width : 100vw;
    height: 100vh;
    overflow: scroll;
    .rectangle{
        border: solid 1px #4a4a4a;
        margin: 10%;
        width: 20vw;
        height: 20vw;
        min-width: 200px;
        min-height: 200px;
    }
}

</style>

こちらに、vw、vhなどで、少しレスポンシブ対応にさせたコードがあります。
ただ、ウィンドウのサイズを縮めた時に、一定のサイズまで小さくなったら、各領域の縮小をやめいです。
そして、溢れた分はスクロールさせたいです。

上のようなコードの場合は、上のcssで大丈夫ですが、

<template>
  <div class="window">

    <div class="rectangle1">


    </div>

    <div class="rectangle2">


    </div>

    <div class="rectangle3">


    </div>





  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component({
  components: {}
})
export default class Window extends Vue {

}
</script>

<style lang="scss">

.window{
    width : 100vw;
    height: 100vh;
    overflow: scroll;
    .rectangle1{
        position: absolute;
        top: 0px;
        left: 0px;
       
        border: solid 1px #4a4a4a;
        width: 20vw;
        height: 20vw;
        min-width: 200px;
        min-height: 200px;
    }

    .rectangle2{
        position: absolute;
        top: 30vw;
        left: 30vw;
       
        border: solid 1px #4a4a4a;
        width: 20vw;
        height: 20vw;
        min-width: 200px;
        min-height: 200px;
    }

    .rectangle3{
        position: absolute;
        bottom: 0px;
        right: 0px;
       
        border: solid 1px #4a4a4a;
        width: 20vw;
        height: 20vw;
        min-width: 200px;
        min-height: 200px;
    }
}

</style>

このようなコードの場合どのようにすればいいのでしょうか。
各領域が被ることなども避けたいです。

Answer 1

min-width等があります。
https://developer.mozilla.org/ja/docs/Web/CSS/min-width

Comments

[退会済みユーザー]

回答ありがとうございます。
１つ目のコードはそれだけで足りそうなのですが、２つ目のコードだとそれだけだと、各領域がぶつかってしまったりします。
positionをvwで指定してる領域なのがあると難しいです。

[liveasnotes]

>positionをvwで指定してる領域なのがあると難しいです。
そりゃそうです

当該部分のみ，@media screen ~等で，単位ごと書きかえてみては？

[退会済みユーザー]

コメントありがとうございます。
media screen 、 使ったことがないので調べてます…

[liveasnotes]

メディアクエリとも呼ばれます

[退会済みユーザー]

いま少し調べてみました、現在移動中でコードをテストできなくて申し訳ないのですが、イメージ的には

ウィンドウのサイズが一定以下の時、positionをpxに差し替える

のようなイメージでしょうか

[退会済みユーザー]

メディアクエリともいうのですね、ありがとうございます

[liveasnotes]

>positionをpxに差し替える
ん？？？
「性格をリンゴ3個に変える」みたいな文章になってますが...（汗
width: ○○vw;とかあるところをwidth: ○○px;にしてみたり...という意味なら合ってます
とりあえず，色々試してみてください．
私も昔はやりがちでしたが，実際にやってみれば結果がすぐわかるようなことは逐一質問したりせず，手を動かした結果と期待とのズレを伝えるようにした方が良いです．（SNSと違って，即応性はそこまで求められていないですし．）

[退会済みユーザー]

ありがとうございます、今試せる状態なので、試してみます(>___<)