如何製作響應模態？ CSS

我得到了一個任務，使模態下面的響應。我應該只是放置更多的媒體查詢或修復模式大小百分比？是否有任何技術，技巧或網站可以幫助我實現自己的目標？如何製作響應模態？ 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; 
    } 
}

來源

2017-10-19 JusTTaIReX

簡單的解決方法是給'寬度'一個百分比值，比如'width：50％'，然後加上'min-width'來避免overshrinking和'max-width'過度擴大。 – Cons7an7ine

簡單，

基於百分比佈局時使用的佈局應該是每個屏幕上的類似。

媒體查詢用於當您要更改不同屏幕尺寸的佈局。

來源

2017-10-19 06:59:04 Hash

如何製作響應模態？ CSS

回答

相關問題