整版反应容器

我有100％的高度和宽度的容器，那么意味着如果任何屏幕的分辨率为100％，则容器内的元素，如果该决议是不是在我位置设计兼容的压缩，我想要一个响应式容器，里面有响应元素，但元素不会压缩。（例尝试调整计算器网站，要素仍然是相同的。）整版反应容器

这里是我的示例代码：

.container { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: gray; 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <h1>Responsive Container</h1> 
 
</div>

来源

2017-10-14 pacificskybeachresort

我不知道什么是真正需要的，如果您希望限制元素不响应高于或低于特定值的响应，当宽度小于/大于使用媒体查询的特定屏幕值时，需要将容器元素固定为固定像素宽度。

参见CSS Media Queries

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像素。

JSFiddle Demo

来源

2017-10-14 16:27:04

感谢兄弟，还有一件事是什么，如果，如果分辨率大，像素将再次兼容？ – pacificskybeachresort

@pacificskybeachresort在JSfiddle演示中，您可以看到，当我们的宽度超过500像素时，响应式设计可以正常工作。 –

整版反应容器

回答

相关问题