时间戳

首页 > 解决方案 > Why cant I make percentages work for font-size

html - Why cant I make percentages work for font-size

问题描述

Recently, I have been making website templates or practicing CSS. There is a recurring problem where percentage is not doing anything, but making a set font size, that won't change when I change the window size. I have tried literally every post on this site for fixing percentages but I can't figure out how to fix this font size. Here is my code:

body{
    background-color: #b74242;
    margin: 0;
    padding: 0;
    height: 100%;
    font-size: 100%;
}


html, body {
    padding: 0;
    margin: 0;
    font-size: 100%;
}

div{
    font-size: 100%;
}

.header{
    background-color: #bc2b2b;
    margin: 0;
    height: 100%;
    max-height: 70%;
    min-height: 70%;
    font-size: 100%;
}

h1{
    text-align: center;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 550%;
    color: white;
    margin-top: 10%;
    margin-bottom: 20%;
}

.left{
    float: left;
    font-size: 100%;
}

img{
    margin: 25px;
    max-width: 45%;
    width: 2000px;
    height: auto;
    font-size: 100%;
}

p{
    font-size: 50%;
}

#d{
    margin: 25px;
    color: white;
    font-family: 'Roboto Condensed', sans-serif;
}
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed"
            rel="stylesheet">
        <title>Title</title>
    </head>
    <body>
        <div class="header">
            <br>
            <h1>Header</h1>
        </div>
        <img src="Trees.png" class="left"></img>
        <p style="font-size: 100%" id="d">DESCRIPTION</p>
    </body>
</html>

Thank you very much for any help!!!

标签： htmlcsspercentage

解决方案

If you to use percentage to font-size of your elements, this is relative to font-size defined in html. So even the window size change, your font-size continues with the same size. The common font-size of html is 16px, so if you have a h1 with font-size: 200%, not matter the window size, the h1 font-size will have 32px.

To font-size change with change of window width use vw. In this way your font-size becomes dynamic.

Like this: h1 { font-size: 15vw }. It means that if window width is 200px your font-size will have 30px; 100vw == 100% of width

1vw == 1% of width.

推荐阅读