汉堡菜单字体大小问题

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

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

顺便说一下，我的标题区域中的h2标题（“Centre de yoga de Grenoble”）与我的问题相同。

我被困在这里。你有什么想法这是从哪里来的？
Chris。

- 编辑。代码是相当巨大的，这就是为什么我只链接到它： 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; 
}

来源

2017-08-30 ChrisL

这将是有益的，如果你只是把汉堡包菜单的HTML和CSS代码在你的问题 – samAlvin

我没有看到一个汉堡包菜单。 –

请添加您已累的HTML和CSS代码 –

没有与响应式设计的问题。我没有看到视口。试试补充一点： <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 或发现更多的下面页：

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

来源

2017-08-30 09:42:57

谢谢。你拯救了我的一天。只需在html中添加即可。克里斯。 – ChrisL

太好了，我添加了代码，但看起来，你可以自己做这个。合十！ :) –

汉堡菜单字体大小问题

回答

相关问题