Question

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

body {font-family：＆＃39; Montserrat＆＃39;，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%（您可以对{{1}进行此更改}）。这会将您的网站分成几列。

要控制浮动元素，请务必使用top-news-inside规则： http://www.w3schools.com/css/css_float.asp

Answer 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

响应网站

2 个答案: