[英]Modal is not responsive for mobile, How to make it responsive on mobile?
[英]How to make a responsive modal? 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;
}
}
簡單來說,
當每個屏幕上的布局均應相似時,將使用基於百分比的布局 。
當您想在不同屏幕尺寸上更改布局時,使用媒體查詢 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.