Schriftgrößenproblem für das Responsive-Navigation-Menü

Ich habe ein reaktionsfähiges Navigationsmenü erstellt, aber einige der Überschriften sind längere Wörter, so dass sie sich zusammenziehen oder überlappen, wenn die Bildschirmgröße kleiner wird. Gibt es einen einfachen Weg, um meine Schriftgröße ansprechend zu gestalten, ohne mehrere Medienabfragen pro Font Breakpoint machen zu müssen? Vielen Dank!Schriftgrößenproblem für das Responsive-Navigation-Menü

Codepen: https://codepen.io/caguilera0001/pen/VKkQxy

Code:

<!DOCTYPE html> 

<html lang="en"> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="HandheldFriendly" content="true"> 

<title>Test Nav Bar</title> 
<link rel="shortcut icon" href="../favicon (1).ico" type="image/x-icon"/> 

<style> 

a { 
text-decoration: none; 
} 


ul, li { 

    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

#nav { 
    margin-left: auto; 
    margin-right: auto; 
    height: 30px; 
    width: 100%; 
    position: absolute; 
    z-index: 2; 
    padding-left: 10%; 
    padding-right: 10%; 
    box-sizing:border-box; /** add this **/ 
-moz-box-sizing:border-box; /** add this **/ 
-webkit-box-sizing:border-box; /** add this **/ 
-ms-box-sizing:border-box; /** add this **/ 
    background-color: #4484CE; 
} 

#nav > a { 
    display: none; 
} 


#nav li { 
    position: relative; 
} 

#nav li a { 
    color: #fff; 
    display: block; 
} 

#nav span:after { 
    width: 0; 
    height: 0; 
    border: 0.313em solid transparent; /* 5 */ 
    border-bottom: none; 
    content: ''; 
    vertical-align: middle; 
    display: inline-block; 
    position: relative; 
    right: -0.313em; /* 5 */ 
} 

/* first level */ 

#nav > ul { 
    height: 30px; 
    background:#93C178; 
    line-height: 30px; 
} 

#nav > ul > li { 
    width: 12.5%; 
    height: 30px; 
    float: left; 
} 

#nav > ul > li > a { 
    height: 30px; 
    text-align: center; 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    text-decoration: none; 
    display:block ; 
    color: #FFF; 
    border: 1px solid #4484CE; 
    text-shadow: 1px 1px 1px #000; 
    font-size: 14px; 
} 

#nav > ul > li:hover > a, #nav > ul:not(:hover) > li.active > a { 
    background-color: #F9CF00; 
} 

/* second level */ 

#nav li ul { 
    background:#93C178; 
    display: none; 
    position: absolute; 
} 

#nav li:hover ul { 
    display: block; 
    left: 0; 
    right: 0; 

} 

#nav li:not(:first-child):hover ul { 
    left: -1px; 
} 

#nav li ul a { 
    height: 30px; 
    text-align: center; 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    text-decoration: none; 
    border: 1px solid #4484CE; 
    text-shadow: 1px 1px 1px #000; 
    color: #fff; 
    font-size: 14px; 
} 

#nav li ul li a:hover, #nav li ul:not(:hover) li.active a { 
    background:#FCFCFC; 
    color: #465C8B; 
} 


@media only screen and (max-width: 62.5em) /* 1000 */ { 

#nav { 
    width: 100%; 
    position: static; 
    margin: 0; 
} 

} 

@media only screen and (max-width: 40em) /* 640 */ { 

html { 
    font-size: 75%; /* 12 */ 
} 

#nav { 
    position: relative; 
    top: auto; 
    left: auto; 
    background-color: none; 
} 

#nav > a { 
    width: 3.125em; /* 50 */ 
    height: 3.125em; /* 50 */ 
    text-align: left; 
    text-indent: -9999px; 
    background-color: #e15a1f; 
    position: relative; 
} 

#nav > a:before, #nav > a:after { 
    position: absolute; 
    border: 2px solid #fff; 
    top: 35%; 
    left: 25%; 
    right: 25%; 
    content: ''; 
} 

#nav > a:after { 
    top: 60%; 
} 

#nav:not(:target) > a:first-of-type, #nav:target > a:last-of-type { 
    display: block; 
} 

/* first level */ 

#nav > ul { 
    height: auto; 
    display: none; 
    position: absolute; 
    left: 0; 
    right: 0; 
} 

#nav:target > ul { 
    display: block; 

} 

#nav > ul > li { 
    width: 100%; 
    float: none; 
} 

#nav > ul > li > a { 
    height: auto; 
    text-align: left; 
    padding: 0 0.833em; /* 20 (24) */ 
} 

#nav > ul > li:not(:last-child) > a { 
    border-right: none; 
    border-bottom: 1px solid #4484CE; 
} 

/* second level */ 

#nav li ul { 
    position: static; 
    padding: 1.25em; /* 20 */ 
    padding-top: 0; 
} 
} 

</style> 

</head> 

<body> 

<nav id="nav" role="navigation"> 
    <a href="#nav" title="Show navigation"><img src="hamburger button.png" width="48" height="48" alt="menu button" longdesc="hamburger button.png" /></a> 
    <a href="#" title="Hide navigation"><img src="hamburger button.png" width="48" height="48" alt="menu button" longdesc="hamburger button.png" /></a> 
<ul> 

<li><a href="index.html">Home</a></li> 

<li> 
<a href="#" aria-haspopup="true">About Us</a> 
<ul> 
    <li><a href="principal's_message.html">Principal's Message</a></li> 
    <li><a href="mission_and_vision.html">Mission and Vision</a></li> 
    <li><a href="our_history.html">Our History</a></li> 
    <li><a href="staff_directory.html">Staff Directory</a></li> 
    <li><a href="links.html">Links</a></li> 
    <li><a href="photo_gallery.html">Photo Gallery</a></li> 
</ul> 
</li> 

<li> 
<a href="#" aria-haspopup="true">School Offices</a> 
<ul> 
    <li><a href="attendance_office.html">Attendance</a></li> 
    <li><a href="counseling_office.html">Counseling</a></li> 
    <li><a href="main_office.html">Main</a></li> 
    <li><a href="magnet_office.html">Magnet</a></li> 
    <li><a href="bridge_office.html">Bridge</a></li> 
    <li><a href="english_learner's_office.html">EL</a></li> 
    <li><a href="itd_office.html">ITD</a></li> 
    <li><a href="library.html">Library</a></li> 
    <li><a href="parent_center.html">Parent Center</a></li> 
    <li><a href="nurse's_office.html">Nurse</a></li> 
    <li><a href="safety_ofifice.html">Safety</a></li> 
    <li><a href="plant_manager's_office.html">Plant Manager</a></li> 
    <li><a href="cafeteria.html">Cafeteria</a></li> 
    <li><a href="student_store.html">Student Store</a></li> 
</ul> 
</li> 

<li> 
<a href="#" aria-haspopup="true">Academics</a> 
<ul> 
    <li><a href="classes_homework.html">Classes/Homework</a></li> 
    <li><a href="culmination_requirements.html">Culmination</a></li> 
    <li><a href="departments.html">Departments</a></li> 
    <li><a href="counseling_office.html">Counseling</a></li> 
    <li><a href="library.html">Library</a></li> 
</ul> 
</li> 

<li> 
<a href="#" aria-haspopup="true">Programs</a> 
<ul> 
    <li><a href="http://www.bancroftib.weebly.com" target="new">IB</a></li> 
    <li><a href="middle_years_programme.html">The Middle Years</a></li> 
    <li><a href="ste[+a]m_program.html">STEA[+a]M</a></li> 
    <li><a href="vei-jv.html">VEI-JV</a></li> 
    <li><a href="gate_sas_program.html">GATE/SAS</a></li> 
    <li><a href="http://lacerstars.org/" target="new">LACER</a></li> 
</ul> 
</li> 

<li> 
<a href="#" aria-haspopup="true">Students</a> 
<ul> 
    <li><a href= "cougar_news.html">Cougar News</a></li> 
    <li><a href= "bell_schedule.html">Bell Schedule</a></li> 
    <li><a href= "classes_homework.html">Classes/Homework</a></li> 
    <li><a href= "dress_code.html">Dress Code</a></li> 
    <li><a href= "cougar_code.html">Cougar Code</a></li> 
    <li><a href= "attendance_policy.html">Attendance Policy</a></li> 
    <li><a href= "culmination_requirements.html">Culmination</a></li> 
    <li><a href= "http://www.bancroftib.weebly.com/learner-profile.html" target="new">IB Learner Profile</a></li> 
    <li><a href= "http://achieve.lausd.net/cms/lib08/CA01000043/Centricity/Domain/317/24359_OSO_PrntStdntHndbk1516_eng.pdf" target="new">Student Handbook</a></li> 
    <li><a href= "library.html">Library</a></li> 
    <li><a href= "map.html">Map</a></li> 
    <li><a href= "http://achieve.lausd.net/site/default.aspx?PageType=3&ModuleInstanceID=1555&ViewID=7B97F7ED-8E5E-4120-848F-A8B4987D588F&RenderLoc=0&FlexDataID=16590&PageID=845" target="new">Food Menu</a></li> 
    <li><a href= "student_store.html">Student Store</a></li> 
    <li><a href= "http://www.bancroftmiddleschool.org/2015-16yearbook/index.html" target="new">Yearbook</a></li> 
</ul> 
</li> 

<li> 
<a href="#" aria-haspopup="true">Parents</a> 
<ul> 
    <li><a href= "parent_bulletin.html">Parent Bulletin</a></li> 
    <li><a href= "cougar_news.html">Cougar News</a></li> 
    <li><a href= "parent_center.html">Parent Center</a></li> 
    <li><a href= "calendar.html">Calendar</a></li> 
    <li><a href= "bell_schedule.html">Bell Schedule</a></li> 
    <li><a href= "classes_homework.html">Classes/Homework</a></li> 
    <li><a href= "culmination_requirements.html">Culmination</a></li> 
    <li><a href= "http://achieve.lausd.net/cms/lib08/CA01000043/Centricity/Domain/317/24359_OSO_PrntStdntHndbk1516_eng.pdf" target="new">District Handbook</a></li> 
    <li><a href= "school_site_council.html">SSC Council</a></li> 
    <li><a href= "school_decision_making_council.html">SDM Council</a></li> 
    <li><a href= "elac.html">ELAC</a></li> 
    <li><a href= "contact_teachers.html">Contact Teachers</a></li> 
</ul> 
</li> 

<li><a href="contact.php">Contact Us</a></li> 

</ul> 
</li> 

</ul> 
</nav> 

<script src="../jquery.min.js"></script> 
<script src="doubletaptogo.js"></script> 
<script> 
    $(function() 
    { 
     $('#nav li:has(ul)').doubleTapToGo(); 
    }); 
</script> 


</body> 

</html>

Quelle

2016-08-31 Citlalipop

Viel besser, wenn für uns eine Geige sorgen kann. –

wie ein Codepen? – Citlalipop

Absolut. Sie können zwischen diesen Online-Code-Editoren wählen. –

hinzufügen Medien-Anfragen.

Zum Beispiel abhängig davon, welche Bildschirmgröße Sie wünschen.

<style> 
@media (max-width: 600px) { 
    #nav { 
    font-size: 16px; 
    } 
} 
</style>

Quelle

2016-08-31 02:26:25 user6725507

Müsste ich sie für jeden Haltepunkt hinzufügen, der die Schriftart aus Platz/scrungt? – Citlalipop

Wenn ich Sie wäre, würde ich langsam den Bildschirm schrumpfen und Breakpoints setzen, wo die Schrift sich auflöst, auf diese Weise wird Ihr Text perfekt sein. :) – user6725507

Das war mein ursprünglicher Plan, ich wollte nur andere Ideen sehen. Ich könnte das nur tun, vielen Dank! – Citlalipop

kann ich sehen Sie Bootstrap in der Site verlinkt sind nicht haben, würde ich so empfehlen, wenn Sie ansprechbar Sachen machen, es zu benutzen, weil es so viel einfacher, Ändern der Größe macht.

Check out this: http://getbootstrap.com/getting-started/ Wenn Sie die Seite öffnen und die Größe des Fensters ändern, wird die Überschrift "Erste Schritte" verkleinert, da sie kleiner wird, was Sie suchen.

Also greifen Sie einfach das Framework von der oben genannten Website und es wird Ihre Website besser funktionieren, responsive weise. Bootstrap erledigt die harte Arbeit für Sie!

Quelle

2016-08-31 02:33:09 Whirlwind991

Ok, ich die Hälfte verstehe, was du sagst. Also lade ich Bootstrap runter und was dann? Muss ich es auf meine Seite verlinken? Wie implementiere ich den Download dann? – Citlalipop

Nachdem Sie es heruntergeladen haben, legen Sie die CSS- und JS-Dateien, die mit diesem Projekt geliefert werden, in Ihr Projekt und verknüpfen Sie das Bootstrap-CSS und JS in Ihrem HTML. Sobald es verbunden ist, können Sie es dann in der Website funktionieren lassen. Es kann ein wenig verwirrend sein, also lesen Sie sich den Abschnitt Erste Schritte auf der Website http://getbootstrap.com/getting-started/#template durch und http://getbootstrap.com/css/ – Whirlwind991

Vielen Dank!Ich werde versuchen, dass – Citlalipop

@Citlalipop Persönlich würde ich Ihre Snap-Point für Ihr mobiles Menü bei 925px anstelle von 640 machen, weil Sie immer noch das Problem mit "School Offices" gehen 2 Zeilen haben.

Quelle

2016-09-02 16:03:01 user6725507

Danke! Ich werde das auch versuchen. Ich werde bald einen aktualisierten Codepen senden – Citlalipop

Schriftgrößenproblem für das Responsive-Navigation-Menü

Antwort

Verwandte Themen