0
以下のモーダルを応答するように割り当てました。私はちょうどより多くのメディアクエリを配置するか、またはモーダルサイズをパーセントに修正するべきですか?私の目標を達成するのに役立つテクニック、ヒント、ウェブサイトはありますか?レスポンシブなモーダルを作成するには? CSS
ありがとうございます。
モーダル親:
.OverlayModal {
z-index: 2;
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: 0;
}
モーダル:レイアウトは、すべての画面に類似していなければならないときに簡単に
.SignInModal {
background: rgb(255, 255, 255);
border-radius: 20px;
border: 1px solid rgb(204, 204, 204);
margin: auto;
width: 238px;
height: 550px;
outline: none;
overflow: scroll;
padding: 0;
@media (min-width: 768px) {
width: 420px;
height: 400px;
}
}
簡単な解決方法は、 'width:50%'のようなパーセンテージ値を与え、次にオーバーウインシングを避けるために 'min-width'を追加し、過大発現のために' max-width'を追加することです。 – Cons7an7ine