【CSS】vue-js-modalにて画面サイズに応じて横幅・縦幅を調整したい

Question

#vue-js-modalにて画面サイズに応じて横幅・縦幅を調整したい

Vue.jsで簡単にモーダルが実装できる「vue-js-modal」
を参考に実装しております。

モーダル内の自身でclassを付けたものはもちろんCSSは適用されるので変更できますが、
vue-js-modalにて用意されたclassはスコープ内でCSSが適用されない為、
どのようにして画面サイズに応じてスタイルを変更させたらいいのか分からない状況です。

<modal class="modal-inner" v-scroll-lock="open" name="post" :width="750" :height="550">

上記のようにライブラリにて用意されているmodalというコンポーネントに対して
:width="750" :height="550"とサイズを指定してあげる仕組みとなってます。

この場合、画面サイズに応じてサイズを変更させる為には、どのようにしてあげたら良いのでしょうか・・

画面サイズに応じたサイズを新たに作ってあげないといけないのでしょうか。

分かる方いらっしゃいましたらお力添えを頂きたいです。

よろしくお願いいたします。

#post.vue

<template>
  <div class="post-content">
    <button @click="
        show();
        openModal();
      " class="post-comment flex">
      <img class="comment-icon" src="../assets/コメント.jpg" alt="コメント" />
    </button>
    <modal class="modal-inner" v-scroll-lock="open" name="post" :width="750" :height="550">
      <div
        data-modal="post"
        aria-expanded="true"
        class="vm--overlay"
        styles="background: rgba(255, 255, 255, 0.1);"
      >
        <div class="vm--top-right-slot"></div>
      </div>
      <div class="modal-header flex">
        <h2 class="post-title flex">Cinemaryを投稿する</h2>
        <hr class="separate" />
      </div>
      <div class="modal-body">
        <div class="post-items flex">
          <div class="post-contens flex">
            <input type="text" class="post-item" maxlength="50" placeholder="タイトル" v-model="title" />
          </div>
          <div class="post-contens flex">
            <textarea-autosize
              name="text"
              rows="1"
              v-model="description"
              placeholder="内容"
              maxlength="50"
              :min-height="70"
              :max-height="70"
            ></textarea-autosize>
          </div>
          <div class="post-contens flex">
            <select
              v-model="genre"
              class="post-select"
              :style="{ color: genre == '' ? 'gray' : 'white' }"
            >
              <option class="post-item" value hidden>ジャンルを選択</option>
              <option
                v-for="genre in genres"
                :value="genre.name"
                :key="genre.id"
                class="post-item"
                style="color: white;"
              >{{ genre.name }}</option>
            </select>
          </div>
          <button class="post-btn" @click.prevent="postItem">投稿</button>
          <button
            class="hide-btn flex"
            @click="
              hide();
              closeModal();
            "
          >×</button>
        </div>
      </div>
    </modal>
  </div>
</template>

Answer 1

シンプルに以下のように画面サイズに合わせて600px用のモーダルを作成し、表示・非表示させるようにしました。

<modal class="modal-inner modal-sp" v-scroll-lock="open" name="post" :width="500" :height="500">
      <div
        data-modal="post"
        aria-expanded="true"
        class="vm--overlay"
        styles="background: rgba(255, 255, 255, 0.1);"
      >
        <div class="vm--top-right-slot"></div>
      </div>
      <div class="modal-header flex">
        <h2 class="post-title flex">Cinemaryを投稿する</h2>
        <hr class="separate" />
      </div>
      <div class="modal-body">
        <div class="post-items flex">
          <div class="post-contens flex">
            <input type="text" class="post-item" maxlength="50" placeholder="タイトル" v-model="title" />
          </div>
          <div class="post-contens flex">
            <textarea-autosize
              name="text"
              rows="1"
              v-model="description"
              placeholder="内容"
              maxlength="50"
              :min-height="70"
              :max-height="70"
            ></textarea-autosize>
          </div>
          <div class="post-contens flex">
            <select
              v-model="genre"
              class="post-select"
              :style="{ color: genre == '' ? 'gray' : 'white' }"
            >
              <option class="post-item" value hidden>ジャンルを選択</option>
              <option
                v-for="genre in genres"
                :value="genre.name"
                :key="genre.id"
                class="post-item"
                style="color: white;"
              >{{ genre.name }}</option>
            </select>
          </div>
          <button class="post-btn" @click.prevent="postItem">投稿</button>
          <button
            class="hide-btn flex"
            @click="
              hide();
              closeModal();
            "
          >×</button>
        </div>
      </div>
    </modal>

.modal-sp {
  @include pc {
    display: none;
  }
  @include tab {
    display: none;
  }
  @include sp {
    display: flex;
  }
}