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{
        ...
    }
}

Answer 2

您被提及响应式网页，但我无法在您的代码中找到任何媒体查询。您必须使用媒体查询，才能获得响应式网页。

应该喜欢这个

/* for Mobile */
@media only screen(min-width:630px)
     { ........}

/*for desktop */
@midea only screen (min-width:1224px)
{ .......}

如何使背景（颜色，而不是img）响应？

2 个答案: