响应式网站答案

【问题标题】：Responsive Website响应式网站
【发布时间】：2016-09-18 13:55:45
【问题描述】：

我有一个创建网站的项目，但我不使用引导程序手动创建它。问题是当我放大和缩小时，它没有响应.. 那么，如何在任何类型的屏幕中以及当我放大/缩小时创建响应式网站？这是我的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{

    }

【问题讨论】：

标签： css media-queries responsive

【解决方案1】：

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

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

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

【讨论】：

请给我jsfiddle

【解决方案2】：

将此添加到标题中：

<link rel="stylesheet" type="text/css" href="responsive.css">

创建一个像 responsive.css 这样的 css 文件

为了做出响应，您应该更改不同大小的 css 代码

例如：

@media only screen and (max-width: 360px) {
.wadah{
    height:200px;
    top:350px;
    left:52px;
}
}

或

@media only screen and (max-width: 640px) {
.wadah{
    height:400px;
    top:500px;
    left:80px;
}
}

* 越大的尺寸应该越大 *

有了这个，你可以做的不仅仅是改变大小（比如改变颜色或制作移动导航栏）

希望对你有用

抱歉英语不好：D

【讨论】：