Question

我的网站只有html和css。我希望如此。
网站网址：www.yoga-grenoble.net 我开始更新网站，以便在手机上显示效果最佳。我用汉堡包菜单开发特定的css。但是，我在汉堡菜单中遇到了字体大小的问题。它在我的PC浏览器上显示正常（即使调整窗口大小与手机一样窄），但在我的移动设备（摩托罗拉X）上显示非常小。
移动网站网址：www.yoga-grenoble.net/New
的CSS：

www.yoga-grenoble.net/New/mobileMain.css
www.yoga-grenoble.net/New/mobileNav.css

顺便说一句，我在标题区（“格勒诺布尔中心瑜伽中心”）的h2标题也有同样的问题。

我被困在这里。你知道它来自哪里吗？
克里斯。

- 编辑。代码非常庞大，这就是为什么我只链接到它： HTML：

www.yoga-grenoble.net/New/index.html

的CSS：

www.yoga-grenoble.net/New/mobileMain.css
www.yoga-grenoble.net/New/mobileNav.css

的index.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

  <title>Centre de yoga de Grenoble</title>

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <meta name="Description" content="Centre de yoga de Grenoble- le clair de l'aube - accueil" />
  <meta name="Author" content="CLe" />
  <meta name="Expires" content="never" />
  <meta name="Geography" content="Fontaine, 38600, Grenoble, 38000, France" />
  <meta name="Keywords" content="Grenoble, Centre de yoga, yoga, nidra, meditation, shine, sophrologie,
                                  , nidra, aromatherapie, medecine chinoise, acuponcture, Qi Gong, eidetique, yoga du rire, Clair de l'aube" />
  <meta name="robots" content="index,follow" />

  <meta name="google-site-verification" content="g8sdkSveYxKwvHWjNx-xV-eVFExRraxk_mCGhu4tf7Y" />

  <link rel="stylesheet" type="text/css" href="./mobileMain.css" title="Normal" />
  <link rel="stylesheet" type="text/css" href="./mobileNav.css" title="Normal" />
<!--
  <link rel="stylesheet" type="text/css" media="screen and (max-width: 749px)" href="./mobileMain.css" title="Normal" />
  <link rel="stylesheet" type="text/css" media="screen and (max-width: 749px)" href="./mobileNav.css" title="Normal" />
  <link rel="stylesheet" type="text/css" media="screen and (min-width: 750px)" href="./fullWidthMain.css" title="Normal" />  
  <link rel="stylesheet" type="text/css" media="screen and (min-width: 750px)" href="./fullWidthNav.css" title="Normal" />  
  <link rel="shortcut icon" type="image/x-icon" href="./images/favicon.ico" />
-->  


</head>


<body>

    <div id="container">

        <div id="header">
            <h1>Le Clair de l'Aube</h1>
            <img src="./images/LotusBanner.jpg" alt="Lotus du centre de yoga de Grenoble" class="leaves" />
            <h2>Centre de yoga de Grenoble</h2>
        </div>

        <!-- Menu defilant: inclure dans le header : <link rel="stylesheet" type="text/css" href="./menu_defilant.css" title="Normal" /> -->
        <nav class="nav">
            <ul>
               <li class="home  current"><a href="#nogo">Accueil</a></li>
               <li class="visite"><a href="./visite.html" title="Visite">Visite</a></li>
               <li class="activites"><a href="#nogo" title="Activites">Activit&eacute;s&nbsp;&nbsp;&#9654;</a>
                   <ul>
                   <li class="subact_EcoleDeYogaDeGrenoble"><a href="./EcoleDeYogaDeGrenoble.html" title="Yoga">Ecole de yoga de Grenoble</a></li>
                   <li class="subact_KailashNathYoga"><a href="./KailashNathYoga.html" title="Yoga">Yoga avec Guillaume</a></li>
                   <li class="subact2"><a href="./YogaMarisel.html" title="Yoga">Yoga avec Marisel</a></li>
                   <li class="subact2"><a href="./PilatesMarjolaine.html" title="Pilates">Pilates avec Marjolaine</a></li>
                   <li class="subact_eidetique"><a href="./imageEidetique.html" title="Image eidetique">Image eid&eacute;tique</a></li>
                   <li class="subact_yogaDuRire"><a href="./yogaDuRire.html" title="yoga du rire">Yoga du rire</a></li>
                   <li class="subact_medecineChinoise"><a href="./medecineChinoise.html" title="medecine chinoise">M&eacute;decine chinoise</a></li>
                   <li class="subact_aromatherapie"><a href="./aromatherapie.html" title="aromatherapie">Aromath&eacute;rapie</a></li>
                   <li class="subact_sophrologie"><a href="./sophrologie.html" title="sophrologie">Sophrologie</a></li>
                   <li class="subact_meditation"><a href="./meditations.html" title="Meditation">M&eacute;ditations</a></li>
                   <li class="subact_QiGong"><a href="./QiGong.html" title="Qi Gong">Qi Gong</a></li>
                </ul>
               </li>
               <li class="calendrier"><a href="./pdf/Planning.pdf">Planning</a></li>
               <li class="contact"><a href="./contact.html" title="contact">Contact</a></li>
               <li class="plan"><a href="./plan.html" title="Plan">Plan</a></li>
            </ul>
        </nav>        <!-- Fin menu defilant -->

        <div id="leftnav">
                <p style="margin-bottom: 0px;">Partager</p>
                <ul class="partage">
                  <li id="share-facebook"><a href="http://www.facebook.com/sharer.php?u=http://www.yoga-grenoble.net&t=Centre de yoga de Grenoble" title="Share on Facebook" target="_blank"><img src="./images/icones/facebook.png" alt="Share on Facebook" /></a></li>
                  <li id="share-twitter"><a href="http://twitter.com/home?status=Centre de yoga de Grenoble http://www.yoga-grenoble.net" title="Tweet this" target="_blank"><img src="./images/icones/twitter.png" alt="Tweet this" /></a></li>
                  <li id="share-delicious"><a href="http://delicious.com/post?url=http://www.yoga-grenoble.net&title=Centre de yoga de Grenoble" title="Add to Delicious" target="_blank"><img src="./images/icones/delicious.png" alt="Add to delicious" /></a></li>
                  <li id="share-google"><a href="https://plusone.google.com/_/+1/confirm?hl=fr&url=http://www.yoga-grenoble.net&title=Centre de yoga de Grenoble" title="Share on Google +" target="_blank"><img src="./images/icones/google.png" alt="Share on Google +" /></a></li>
                  <li id="share-linkedin"><a href="http://www.linkedin.com/shareArticle?mini=true&url=http://www.yoga-grenoble.net&title=Centre%20de%20yoga%20de%20Grenoble&summary=Centre%20Le%20Clair%20de%20l'Aube&source=YogaGrenoble" title="Share on LinkedIn" target="_blank"><img src="./images/icones/linkedin.png" alt="Share on LinkedIn" /></a></li>
                </ul>
                <p><br /><br /></p>

            <h1>Liens</h1>
                <p><a href="./planDuSite.html">Plan du site web</a></p>
        </div>


        <div class="article">

            <h1>Ann&eacute;e 2016 - 2017</h1>

            <div class="article_info">

                Par <a href="#">Nathalie</a>

            </div>

            <p>
                C'est la rentr&eacute;e aussi au Clair de l'Aube, les activit&eacute;s hebdomadaires ont repris le 12
                septembre, avec quelques nouveaut&eacute;s &nbsp;:
                </p>
                <ul>
                  <li>Le yoga avec Nathalie&nbsp;: cours le lundi matin, midi et soir + le mercredi midi et soir ; ateliers r&eacute;guliers. Et le cours en quinzaine pour les enfants du mercredi
                      apr&egrave;s-midi grandit pour la tranche d'&agrave;ge des 7-14 ans, avec un nouveau cours pour les 11-17 ans le jeudi de 16h30 à 17h30, et toujours les ateliers mensuels
                      parents-enfants avec les 3-5 ans, et les plus grands ensuite 6-10 ans, le samedi matin</li>
                  <li>Le qi gong avec Delphine&nbsp;: cours le mardi midi et nouvel horarire le jeudi soir de 19h &agrave; 20h15</li>
                  <li>Le yoga avec Guillaume&nbsp;: 2 cours le mardi soir + une prolongation possible m&eacute;ditation-souffle de 21h30 &agrave; 22h</li>
                  <li>La m&eacute;ditation avec Nathalie (les mercredi soir de 20h &agrave; 21h en quinzaine)</li>
                  <li>Le cours de Pilates avec Marjolaine le mercredi matin se poursuit et se compl&egrave;te d'un cr&eacute;neau le jeudi de 17h45 &agrave; 18h45</li>
                  <li>Le yoga-nidra avec Nathalie (certains mercredi soir)</li>
                  <li>Un nouveau cours de yoga avec Marisel, le jeudi midi</li>
                  <li>Le yoga du rire avec Nathalie (certains vendredi midi) et aussi avec Fr&eacute;d&eacute;rire</li>
                  <li>La sophrologie avec Jacqueline passe sous la forme d'ateliers mensuels certains vendredi soirs</li>
                </ul>
            <p>
                  Et toujours, sur rendez-vous, des soins traditionnels chinois avec Delphine et maintenant aussi Isabelle le vendredi.
                </p>
            <p>
                  Plus d'informations sont disponibles dans l'onglet activit&eacute;s.
                </p>
            <p>
                  Jacques Vigne animera 3 jours de m&eacute;ditation les mardi 29 novembre, mercredi 30 et jeudi 1er d&eacute;cembre... &agrave; suivre pour les inscriptions d&eacute;j&agrave; ouvertes&nbsp;!
                </p>
            <p>
                  Au plaisir de vous recevoir au Clair de l'Aube.
                </p>

        </div>
        <div class="footer">
            <h1>&copy; Le Clair de l'Aube 2015</h1>
        </div>



    </div>

</body>

</html>

css：mobileMain.css

/* CSS Document */



body {

    background-color:#ffff99;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:0.74em;
    color:#000000;
    line-height:20px;
    cursor:default;
    margin:0;

}


#container {

    min-width:400px;
    padding:10px;
    background-color:#FFFFFF;
    margin:0 auto 0 auto;

}


#header {
    background-color:#3F4A3E;
    font-weight:bold;
}
#header img {
    visibility: hidden;
    width: 0px;
}

#header h1 {
    color:#FFFFFF;
    font-family:"Trebuchet MS", Arial, Verdana;
    font-weight:bold;
    padding:0;
    padding-left:20px;
    padding-top:10px;
    padding-bottom:20px;
    margin:0;
    border-bottom:2px solid #ffffff;
    font-size:150%;
}

#header h2 {
    color: #ffffff;
    float: right;
    font-family:"Trebuchet MS", Arial, Verdana;
    font-size:120%;
    letter-spacing: +0px;
    margin:0;
    margin-top: -30px; /* rattrapage de l'image */
    margin-right:10px;
    text-indent:5px;
    background-image:none;
    border-bottom:0;
}




.leaves {

    border-right:2px solid #ffffff;
    float:left;

}

#leftnav {
    border:1px solid #cccccc;
    padding:5px;
    float:right;
    clear:left;
    margin-top: -50px;
    background-image: url("images/backgrounds/case_background.jpg");
    background-position:bottom right;
    background-repeat:repeat-x;
    height: 25px;
}
#leftnav h1, #leftnav p a {
    visibility: hidden;
}
#leftnav p {
    margin-top: -6px;
}
#leftnav ul  {
     float: right;
     height: 26px;
     margin: 0;
     padding: 2px 0 0 0;
     color: #747B83;
     margin-top: -8px;
}

#leftnav ul li {
     display: inline-block;
     color: #747B83;
     margin: 0 2px;
     vertical-align: middle;
     height: 13px;
}

#leftnav ul li img  {
     border: none;
}

#sidebar h1,h2,h3 {
    font-family:Arial Narrow, Arial, Helvetica, sans-serif;
    letter-spacing:-1px;
    color:#000000;
    border:none;
    background-image:none;
}

.article {
    margin-left:0px; /* compared to 170px for full width */
    padding:10px;
    border: 1px solid #cccccc;
    margin-bottom:10px;
    background-image: linear-gradient(white, #eeeeee);
    background-size: 50%;
    background-repeat: repeat-x;
    background-position: bottom;
}

.article p {

    margin:10px;

}

.article_info {

    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    color:#666666;
    letter-spacing:2px;
    font-variant:small-caps;
    text-transform:lowercase;

}

.article_info a {

    font-weight:bold;
    text-decoration:none;
    color:#000000;

}

.article_large {

    margin-left:0px;
    padding:10px;
    border: 1px solid #cccccc;
    background-position:top left;
    background-repeat:no-repeat;
    margin-bottom:10px;
    background-image: linear-gradient(white, #eeeeee);
    background-size: 50%;
    background-repeat: repeat-x;
    background-position: bottom;
}


.article_large p {

    margin:10px;

}


.article h1, .article h2, .article h3, .article_large h1, .article_large h2, .article_large h3 {    

    font-family:Arial Narrow, Arial, Helvetica, sans-serif;
    letter-spacing:-1px;
    color:#000000;
    border-bottom:2px solid #cccccc;
    background-image: url("images/backgrounds/lotus_bullet.png");
    background-position:top right;
    background-repeat:no-repeat;
    padding-bottom:5px;
    padding-top:5px;
    margin-top: 30px;
}

.footer {
    background-color:#3F4A3E;
    font-weight:bold;
}
.footer h1 {
    color:#FFFFFF;
    font-family:"Trebuchet MS", Arial, Verdana;
    font-weight:bold;
    text-align: right;
    padding:0;
    padding-right:20px;
    padding-top:10px;
    padding-bottom:20px;
    margin:0;
    border-bottom:2px solid #ffffff;
    font-size:120%;
}


a {
    color:#9ACC53;
    text-decoration:none;
}
a:hover {
    color: tomato;
    text-decoration: underline;
}

mobileNav.css：

    .nav {
        position: relative;
        min-height: 25px;
        margin: 5px 0 20px 0;
        padding: 0;
    }   
    .nav ul {
        width: 120px;
        min-height: 25px;
        margin:0;
        padding: 2px 0;
        position: absolute;
        top: 0;
        left: 0;
        border: solid 1px #aaa;
        background: url(./images/icones/icon-menu.png) no-repeat 10px 10px;
        border-radius: 5px;
        box-shadow: 0 1px 2px rgba(0,0,0,.3);
    }
    /* center nav */
    .nav ul li.home {background:url(./images/icones/home.png) no-repeat, linear-gradient(white, #cfcfcf)}
    .nav ul li.visite {background:url(./images/icones/visite.png) no-repeat, linear-gradient(white, #cfcfcf);}
    .nav ul li.activites {background:url(./images/icones/activites.png) no-repeat, linear-gradient(white, #cfcfcf);;}
    .nav ul li.calendrier {background:url(./images/icones/calendrier.png) no-repeat, linear-gradient(white, #cfcfcf);;}
    .nav ul li.contact {background:url(./images/icones/contact.png) no-repeat, linear-gradient(white, #cfcfcf);;}
    .nav ul li.plan {background:url(./images/icones/plan.png) no-repeat, linear-gradient(white, #cfcfcf);;}

    .nav li {
        display: none; /* hide all <li> items */
        float: left;
        min-height: 25px;
        padding: 0;
        width: 120px;
        margin: 0;
        z-index:10;
        background: linear-gradient(white, #cfcfcf);
    }

    .nav ul .current {
        display: block; /* show only current <li> item */
        background: url(./images/icones/icon-menu.png) no-repeat 10px 10px, linear-gradient(white, #cfcfcf);
    }
    .nav ul li.current{
        background: url(./images/icones/icon-menu.png) no-repeat 10px 10px, linear-gradient(white, #cfcfcf);
    }   
    .nav a, a.visited {
        display: block;
        padding: 5px 5px 5px 32px;
        text-align: left;
        color: #000;
    }
    .nav .current a {
        background: none;
        color: #000;
    }

    /* on nav hover */
    .nav ul:hover {
        background-image: none;
    }
    .nav ul:hover li {
        display: block;
        margin: 0;
    }
    .nav ul:hover .current {
        background: url(./images/icones/icon-check.png) no-repeat 10px 11px, linear-gradient(white, #cfcfcf);
    }

    .nav ul li ul {
        display: none;
    }
/* submenu */
.nav ul li.subact_EcoleDeYogaDeGrenoble {background:url(./images/icones/subact_EcoleDeYogaDeGrenoble.gif) no-repeat, linear-gradient(white, #cfcfcf)}
.nav ul li.subact_KailashNathYoga {background:url(./images/icones/subact_KailashNathYoga.gif) no-repeat, linear-gradient(white, #cfcfcf)}
.nav ul li.subact_meditation {background:url(./images/icones/subact_meditation.gif) no-repeat, linear-gradient(white, #cfcfcf)}
.nav ul li.subact_yogaDuRire {background:url(./images/icones/subact_yogaDuRire.png) no-repeat, linear-gradient(white, #cfcfcf)}
.nav ul li.subact_sophrologie {background:url(./images/icones/subact_sophrologie.jpg) no-repeat, linear-gradient(white, #cfcfcf)}
.nav ul li.subact_medecineChinoise {background:url(./images/icones/subact_medecineChinoise.jpg) no-repeat, linear-gradient(white, #cfcfcf)}
.nav ul li.subact2 {background:url(./images/icones/subact2.gif) no-repeat, linear-gradient(white, #cfcfcf)}
.nav ul li.subact_aromatherapie {background:url(./images/icones/subact_aromatherapie.jpg) no-repeat, linear-gradient(white, #cfcfcf)}
.nav ul li.subact_danse {background:url(./images/icones/subact_danse.gif) no-repeat, linear-gradient(white, #cfcfcf)}
.nav ul li.subact_eidetique {background:url(./images/icones/subact_imageEidetique.png) no-repeat, linear-gradient(white, #cfcfcf)}
.nav ul li.subact_psychotherapie {background:url(./images/icones/subact4.gif) no-repeat, linear-gradient(white, #cfcfcf)}
.nav ul li.subact_QiGong {background:url(./images/icones/subact_QiGong.jpg) no-repeat, linear-gradient(white, #cfcfcf)}


/* Sub Menus */
.nav li ul {
    position: absolute;
    margin-top: -1px;
    margin-left: 120px;
    display: none;
    width: 220px;
}

.nav li:hover ul {
    display: block;
}

.nav li ul li {
    display: block;
    min-height: 25px;
    width: inherit;
    padding-left: 0px;
}   




/* partage nav */
.nav.right ul {
    left: auto;
    right: 0;
    margin-top: -50px;
}

/* center nav */
.nav.center ul {
    left: 0%;
    margin-left: 0px;
}

Answer 1

响应式设计存在问题。我没有看到视口。尝试添加此： <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 或者在下面的页面上找到更多信息：

https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

汉堡菜单字体大小问题

1 个答案: