如何制作响应模态？ CSS

2017-10-19 155 views 0 likes

我得到了一个任务，使模态下面的响应。我应该只是放置更多的媒体查询或修复模式大小百分比？是否有任何技术，技巧或网站可以帮助我实现自己的目标？如何制作响应模态？ 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

回答

相关问题