整版反应容器
问题描述:
我有100%的高度和宽度的容器,那么意味着如果任何屏幕的分辨率为100%,则容器内的元素,如果该决议是不是在我位置设计兼容的压缩,我想要一个响应式容器,里面有响应元素,但元素不会压缩。 (例尝试调整计算器网站,要素仍然是相同的。)整版反应容器
这里是我的示例代码:
.container {
height: 100%;
width: 100%;
background-color: gray;
}
h1 {
text-align: center;
}
<div class="container">
<h1>Responsive Container</h1>
</div>
答
我不知道什么是真正需要的,如果您希望限制元素不响应高于或低于特定值的响应,当宽度小于/大于使用媒体查询的特定屏幕值时,需要将容器元素固定为固定像素宽度。
CSS:
.container {
height: 100%;
width: 100%;
background-color: gray;
}
h1 {
text-align: center;
}
@media only screen and (max-width: 500px) {
.container {
width: 500px;
}
}
在下面的jsfiddle你可以看到,元件被设置为固定的宽度(500px
)当屏幕宽度小于500像素。
感谢兄弟,还有一件事是什么,如果,如果分辨率大,像素将再次兼容? – pacificskybeachresort
@pacificskybeachresort在JSfiddle演示中,您可以看到,当我们的宽度超过500像素时,响应式设计可以正常工作。 –