嗯,我很新的快速响应设计,所以请原谅我,如果我问愚蠢的问题。响应式网站设计元素缩放
所以我在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
这将会是巨大的,如果有人能告诉我什么,我做错了。
感谢
好吧,让我试试看。 – sequel
不,它是一样的。没有什么改变:( – sequel
你是否用现金重新载入你的页面?? – M0ns1f