css - 响应式网站

Question

我有一个创建网站的元素，但我是手动创建的，没有使用 Bootstrap 。问题是当我放大和缩小时，它没有响应......那么，如何在任何类型的屏幕上以及何时放大/缩小时创建响应式网站？这是我的 CSS 代码

body{font-family: 'Montserrat', sans-serif;}

.wadah{
    width:83.8%;
    height:1000px;
    position:absolute;
    z-index:1;
    top:650px;
    left:102px;
    background:white;
    border:1px solid #d2d1d1}
.top-news{
    width: 1125px;
    height:220px;
    background:#;
    border-bottom:1px solid #d2d1d1}
.top-news-inside{
    width:281.25px;
    height:220px;
    float:left;
    padding:20px;
    box-sizing:border-box;
    background:#;
    }
.content{
    width:1125px;
    height:auto;
    background:#}
.content-left{

    }

Answer 1

除了 CSS3，您还可以使用一些媒体查询: http://www.w3schools.com/css/css_rwd_mediaqueries.asp

您只需选择合适的断点并重写您当前的样式即可。例如，您可以添加所有具有 float: left 规则的元素，在媒体查询中使用 float: none 属性，并将它们的宽度扩展到 100%屏幕(您可以对 top-news-inside 类进行此更改)。这会将您的网站分成几列。

要控制 float 元素，请确保使用 clear: both 规则: http://www.w3schools.com/css/css_float.asp