Question

我对响应式设计很陌生，所以如果我提出愚蠢的问题，请原谅我。

所以我在Dreamweaver中为自己创建了一个网站。我的网站的桌面版本看起来不错，但每当我使用手机或平板电脑打开它时，元素都无法正常缩放。

我已经使用了媒体查询，该网站在Firefox的响应式设计模式下看起来没问题，但在实际设备中却没有。

这是我的index.html：

<!DOCTYPE html>

<html>

<head>

<title>Home</title>

<link href="css/main.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400|Raleway:300,400,500|Roboto:100,400,500,700" rel="stylesheet">

</head>
<body>

<div class="container-fluid">

    <div class="intro">

    <div class="col-xs-12 text-center">

        <div class="heading">

            Hi

        </div>

        <div class="para">

            Here goes a brief description about myself and what I do.

        </div>

        <div class="knowMe">

            <input class="button" type="button" name="getToKnowMe" value="Get to know me"/>

        </div>

        <div class="start">
        <a href="#">
            or contact me
        </a>
        </div>

    </div> <!--col-xs-->

    </div> <!--intro-->

</div> <!--container fluid-->

</body>

</html>

这是我的main.css：

*{
    font-family: roboto;
}

a, a:hover, a:link, a:active, a:visited{
  color: white !important;
  text-decoration: none !important;
}

html{
    font-size: 16px;
}

.container-fluid{
    padding: 0 !important;
}

.intro{
    background: linear-gradient(#E93D1D,#E95236);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    margin: 0;
    width: 100%;
    color: white;
    padding: 5em;
    height: 48em;
}

.intro .heading{
    margin-top: 0.2em;
    font-size: 8em;
    font-weight: 100;
    text-align: center;
}

.intro .para{
    font-size: 2.5em;
    font-weight: 100;
    text-align: center;
}

.intro .start{
    font-size: 1.5em;
    font-weight: 100;
    text-align: center;
    text-decoration: underline;
    text-decoration-color: white;
    text-decoration-style: dotted;
}

.intro .button{
  box-sizing: content-box;
  cursor: pointer;
  padding: 1em 2.5em;
  border: 2px solid white;
  border-radius: 50px;
  font-size: 1.5em;
  font-weight: 300;
  color: white;
  text-overflow: clip;
  margin: 3em 2em 0.75em 2em;
  background: none;
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
}

.intro .button:hover{
  border: 2px solid white;
  border-radius: 5px;   
  background: white;
  color: #E95236;
}

@media only screen and (max-width: 320px){

    .intro{
        padding: 1em;
        height: 41em;
    }

    .intro .heading{
        font-size: 5em;
        padding-top: 1em;
    }

    .intro .para{
        font-size: 1.5em;
    }

    .intro .button{
        font-size: 1.2em;
        padding: 0.8em 0.8em;
    }

    .intro .start{
        font-size: 1em;
    }

}

@media only screen and (min-width: 321px) and (max-width:375px){

    .intro{
        padding: 1em;
        height: 48em;
    }

    .intro .heading{
        font-size: 8em;
        padding-top: 0.65em;
    }

    .intro .para{
        font-size: 2em;
    }

    .intro .button{
        font-size: 1.5em;
        padding: 0.75em 0.75em;
    }

    .intro .start{
        font-size: 1.2em;
    }

}

@media only screen and (min-width: 376px) and (max-width:414px){

    .intro{
        padding: 1em;
        height: 53em;
    }


    .intro .heading{
        font-size: 8em;
        padding-top: 1em;
    }

    .intro .para{
        font-size: 2em;
    }

    .intro .button{
        font-size: 1.5em;
        padding: 0.75em 1.2em;
    }

    .intro .start{
        font-size: 1.2em;
    }

}

这就是我的网站在Firefox响应式设计模式中的外观：

https://image.ibb.co/jCr54k/moz.jpg

这就是我在iPhone SE中的样子：

https://image.ibb.co/ihA4x5/IMG_1675.png

如果有人可以告诉我我做错了什么，那就太好了。

由于

Answer 1

尝试添加此类

html,body{
width:100%;
height:100vh;
/* or just add*/
background-color: #e94224;
/* and no need to use those classes */
}
.container-fluid {
padding: 0 !important;
height: 100%;
display: inline-block;
}
.intro {
 /* change the height from 48em to 100% */
height: 100%;
}

Answer 2

对我来说这一切似乎都很好，但body没有任何高度。

尝试添加css：

body {
    height: 100%;
}

更新：没关系，这还不够。你在其他地方设置了一些高度。

响应式网站设计元素缩放

2 个答案: