響應式網站設計元素縮放

嗯，我很新的快速響應設計，所以請原諒我，如果我問愚蠢的問題。響應式網站設計元素縮放

所以我在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

這將會是巨大的，如果有人能告訴我什麼，我做錯了。

感謝

來源

2017-07-30 sequel

嘗試添加此類

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%; 
}

來源

2017-07-30 18:17:54 M0ns1f

好吧，讓我試試看。 – sequel

不，它是一樣的。沒有什麼改變:( – sequel

你是否用現金重新載入你的頁面？？ – M0ns1f

這一切似乎沒什麼問題，與body沒有任何高度的除外。

嘗試添加CSS：

body { 
    height: 100%; 
}

UPDATE：沒關係，這是不夠的。你在其他地方設置了一些高度。

來源

2017-07-30 18:24:24 nGAGE

好的，讓我試試看。我會告訴你。 – sequel

沒問題。對我來說，你試圖幫助我就足夠了。謝謝：） – sequel

響應式網站設計元素縮放

回答

相關問題