반응 형 모달을 만드는 방법은 무엇입니까? 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 %'와 같이 퍼센트 값을주고 overshrinking을 피하기 위해 'min-width'를 추가하고과 팽창을 위해'max-width'를 추가하는 것입니다. – Cons7an7ine

백분율 기초 레이아웃 사용된다.

다른 화면 크기로 레이아웃을 변경하려는 경우 미디어 쿼리이 사용됩니다.

출처

2017-10-19 06:59:04 Hash

반응 형 모달을 만드는 방법은 무엇입니까? CSS

답변

관련 문제