html - 如何使背景(颜色，而不是 img)响应？

Question

我正在构建响应式页面。一节有问题。当我缩小屏幕时，背景颜色会消失(下降几毫米)。我检查过 - 当我没有任何背景时 - 我没有问题。如何解决？为什么会这样？

.bottomright{
	grid-area: bottomright;
	display: flex;
	justify-content: center; 	
	align-items: center;
	flex-direction: column;
	background-color: #D3D3D3;
	position: relative; 	
}
.bottomright:hover{	
	z-index: 1;
    box-shadow: 0px -2px 24px 2px rgba(0,0,0,0.2);
	transform: scale(1.02);
}
.bottomright h4{
	color: #808080;	
	flex: 0 0 auto; 
	align-self: flex-start;
	position: absolute;
	top:2rem;
	left: 2rem;
}
.bottomright img{
	flex: 0 1 auto;
	align-self:center;	
	max-width: 80%;
}

 <div class="bottomright">
                <h4>SHCEDULE A MEETING AT
                    <p>IBC 2016</h4>
                <img src="comigo/other/img-event-IBC.jpg">
            </div>

Answer 1

所有你想要响应的东西都放在一个 div 中，然后你必须在你的 css 中为每个显示设备设置媒体屏幕属性。

像这样:

@media screen and (min-width: 1024px){
    .responsive{
        ...
    }
}
@media screen and (min-width: 980px) and (max-width: 1024px){
    .responsive{
        ...
    }
}

/* Tablet */
@media screen and (min-width: 760px) and (max-width: 980px){
    .responsive{
        ...
    }
}

/* Mobile HD */
@media screen and (min-width: 350px) and (max-width: 760px){
    .responsive{
        ...
    }
}

/* Mobile LD */
@media screen and (max-width: 350px){
    .responsive{
        ...
    }
}