Блог

Главная - Вопросы по программированию - Отрисовка новой страницы с другим размером шрифта

Отрисовка новой страницы с другим размером шрифта

#html #css

#HTML #css

Вопрос:

Итак, вот весь мой код. Я довольно новичок в веб-дизайне, поэтому, возможно, допустил несколько ошибок. Проблема в том, что при загрузке about me страницы размер шрифта для навигации уменьшается. Я пытался искать ответы, но ни один из них не имеет смысла для меня. Вы можете помочь? Я опубликовал это однажды, но никто не смог решить это.

 <!doctype html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Home Page</title>
        <link rel="stylesheet" style="text/css" href="main.css" />
    </head>

    <body>
        <header>
            <div id="logo">
                <img src="logo.jpg" alt="Logo" width="" height="" />
            </div>

            <nav>
                <ul>
                    <li> <a href="index.html">Gallery</a> </li><!-- commenting out white space caused by display: inline-block 
                    --><li> <a href="about_me.html">About Me</a> </li><!--
                    --><li> <a href="#">Contact</a> </li>
                </ul>
            </nav>

            <div id="socialIcons">
                <h4>Follow me:</h4>
                <a href="#"> <img src="facebook_Icon.jpg" alt="" width="" height="" /> </a>
            </div>
        </header>

        <hr />

        <div id="contentWrapper">
            <div id="itemList">
                <ul>
                    <li> <a href="#">Link One</a> </li>
                    <li> <a href="#">Link Two</a> </li>
                    <li> <a href="#">Link Three</a> </li>
                    <li> <a href="#">Link Four</a> </li>
                    <li> <a href="#">Link Five</a> </li>
                </ul>
            </div>

            <div id="itemImages">
                <img src="items.jpg" alt="" width="" height="" />
                <img src="items.jpg" alt="" width="" height="" />
                <img src="items.jpg" alt="" width="" height="" />
                <img src="items.jpg" alt="" width="" height="" />
                <img src="items.jpg" alt="" width="" height="" />
                <img src="items.jpg" alt="" width="" height="" />
                <img src="items.jpg" alt="" width="" height="" />
                <img src="items.jpg" alt="" width="" height="" />
            </div>
        </div>
    </body>
</html>

<!doctype html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>About Me</title>
        <link rel="stylesheet" style="text/css" href="main.css" />
    </head>

    <body>
        <header>
            <div id="logo">
                <img src="logo.jpg" alt="Logo" width="" height="" />
            </div>

            <nav>
                <ul>
                    <li> <a href="index.html">Gallery</a> </li><!-- commenting out white space caused by display: inline-block 
                    --><li> <a href="about_me.html">About Me</a> </li><!--
                    --><li> <a href="#">Contact</a> </li>
                </ul>
            </nav>

            <div id="socialIcons">
                <h4>Follow me:</h4>
                <a href="#"> <img src="facebook_Icon.jpg" alt="" width="" height="" /> </a>
            </div>
        </header>

        <hr />
    </body>
</html>

*{
    margin: 0px;
    padding: 0px;
}

html{
    height: 100%;
    width: 100%;
}

body{
    background-color: #fff;
    height: 100%;
    width: 100%;
}

hr{
    width: 90%;
    margin: 2% auto; 
}

header{
    margin: 0 auto;
    width: 90%;
    height: 14%;
    background-color: #ddd;
    position: relative;
}

#logo{
    height: 100%;
    display: inline;
}

#logo img{
    height: 100%;
    width: 30%;
    float: left;
    /*max-width: 359px;
    min-width: 288px;*/
}

nav{
    float: left;
    width: 40%;
    /*background-color: green;*/
    position: absolute;
    left: 30%;
    bottom: 0px;
}

nav ul{
    text-align: center;
    width: 100%;
}

nav ul li{
    list-style-type: none;
    display: inline-block;
    width: 28%;
    margin: 0 1%;
}

nav ul li a{
    text-decoration: none;
    /*background-color: #aaa;*/
    display: block;
    width: 100%;
    font-size: 1.4em;
    color: #000;
}

nav ul li a:link{
    background-color: #aaa;
}

nav ul li a:hover{
    background-color: #ff5588;
}

nav ul li a:active{
    background-color: red;
}

#socialIcons{
    position: absolute;
    right: 5%;
    top: 15%;
    /*background-color: blue;*/
    width: 12%;
}

#socialIcons h4{
    position: absolute; 
    left: 0;
    bottom: 0;
}

#socialIcons img{
    vertical-align: bottom; /*removing space below image caused by default vertical-align: baseline; property*/
}

#socialIcons a{
    background-color: pink;
    float: right;

}

#contentWrapper{
    width: 90%;
    margin: 0 auto;
}

#itemList {
    width: 18%;
    background-color: #ddd;
    float: left;
    margin-right: 2%;
}

#itemList ul li {
    list-style-type: none;
    font-size: 1.2em;
}

#itemList ul li a{
    text-decoration: none;
    font-size: 0.9em;
    color: #000;
}

#itemImages {
    width: 80%;
    float: left;
    background-color: #ddd;
}

#itemImages img{
    /*width: 30%;*/
    /*height: 8em;*/
    /*max-width: 180px;
    max-height: 180px;*/
    width: 20%;
    padding: 1em 2.5%;
    display: block;
    float: left;
}

Комментарии:

1. Я тестировал это с файлами в том же каталоге, похоже, никаких проблем нет. Проблема только в размере шрифта?

2. @Brian это шрифт и изображение в заголовке, которые становятся меньше. Это сокращенная версия моего кода, который кто-то отредактировал, когда я последний раз публиковал этот вопрос. Я отредактирую его и добавлю полный код, поскольку проблема может быть в другом месте

3. Я также не видел никаких проблем с размерами шрифта — обе страницы абсолютно одинаковы. Убедитесь, что на каждой странице вы удерживаете shift и нажимаете RELOAD кнопку инструмента (стрелка, обведенная по кругу), чтобы убедиться, что вы просматриваете последнюю копию веб-страницы

4. @ReeceBarrett важно, чтобы вы понимали, как em влияет на размеры шрифта во вложенных элементах. Вот пример, который я быстро подготовил, чтобы показать, как это может повлиять на вложенные элементы: jsbin.com/genohobupa/edit?html ,css,вывод

5. Рад, что смог помочь. Проще говоря, rem использует размер шрифта корневого элемента в качестве базового, который обычно равен 16 пикселям, если не указано иное, по сравнению с em, который берет за основу родительский элемент. Возможно, вы захотите поискать приличную статью о различиях и лучших практиках. Надеюсь, это каким-то образом решит проблему.