Question

我今天遇到的问题是如何在导航中的 divs 中使用百分比作为字体大小，以便那些 divs 完全适合导航？我通常使用像素，并知道如何使用 px ，但我想学习如何使用百分比，以便我的网页在不同大小的屏幕中适当调整大小。

HTML：

<html lang="en">
    <head>
        <title>The Broker</title>
        <meta charset="utf-8">
        <meta content="Real Estate Agent Toronto" name="keywords">
        <meta content="Homepage of a real estate agent in Toronto" name="description">
        <link rel="stylesheet" href="Styles.css">
    </head>
    <body>
        <header>
            <img src="Images/Remax80H.png">
            <span class="HeadButton">Home</span>
            <span class="HeadButton">Property Listings</span>
            <span class="HeadButton">Sitemap</span>
            <span class="HeadButton">Contact me</span>
            <span class="HeadButton">About me</span>
            <img src="Images/Profile80H.png">
        </header>
        <nav>
            <div class="NavButton">
                Home
            </div>
            <div class="NavButton">
                Property Listings
            </div>
            <div class="NavButton">
                Sitemap
            </div>
        </nav>
        <main>
            Something
        </main>
        <footer>
            Something
        </footer>
    </body>
</html>

CSS：

/*
Author: Dharmesh Sujeeun
Student ID: 300-912-000
Purpose: Project for COMP213 course at Centennial College.
First Created: December 3 2016
Last Modified: December 3 2016
*/

/*
Color Palette:


*/

@font-face {
    font-family: Alcubierre;
    src: url(fonts/Alcubierre/Alcubierre.otf);
}

@font-face {
    font-family: CaviarDreams;
    src: url(fonts/CaviarDreams/CaviarDreams.ttf);
}

@font-face {
    font-family: Capsuula;
    src: url(fonts/Capsuula/Capsuula.ttf);
}

@font-face {
    font-family: Unique;
    src: url(fonts/Unique/Unique.ttf);
}

body {
    margin: 0px;
    padding: 0px;
    font-family: "Century Gothic", sans-serif;
}

header {
    height: 100%;
    width: 100%;
    background-color: #CBE3F9;
}

.HeadButton {
    font-family: "Alcubierre", sans-serif;
    color: darkslategray;
    font-size: 150%;
    vertical-align: 110%;
    margin-left: 3%;
    margin-right: 3%;
}

nav {
    height: 100%;
    width: 20%;
    float: left;
    background-color: #DFE5EA;
}

.NavButton {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #DFE5EA;
    color: darkslategray;
    font-family: "Alcubierre", sans-serif;
    font-size: 100%;
}

main {
    height: 100%;
    width: 76%;
    display: inline-block;
    background-color: #DEFAFB;
    padding: 2%;
}

footer {
    height: 96%;
    width: 96%;
    background-color: #CBE3F9;
    padding: 2%;
}

img {
    padding: 0.5%;
}

使用div中文本的字体大小百分比，以便div完全适合我的导航？

0 个答案: