en fleksibel tilgang til deres navigation... mange responderende websteder giver en horisontal navigation bar for store skærme og ud navigation for mindre viewports.det er en ganske god tilgang, men den er ikke uden problemer.for det første udstyr kommer ikke kun i de store og de små, de kommer i alle størrelser, man kan forestille sig.for det andet sejlads kan ændre sig over tid.for det tredje, layout og skriftstørrelse kan variere mellem skærmstørrelser.vi gør tingene anderledes...,,,, hvorfor ikke kontrol (med javascript) for at se, hvor meget af vores skibsfart faktisk passer på den plads, der er til rådighed.når vi ved, at vi kan tage ting, der ikke passer ind i navbar og flytte dem til et dropdown menu.på især små skærme, vi kan vælge at sætte hele menuen i en dropdown.,,, ved navigation passer?,, som type navigation fungerer bedst?svaret på dette spørgsmål afhænger af flere faktorer, herunder skærmstørrelse, skriftstørrelse skrifttype, familie, antallet af nav - produkter, og den sammenhæng, hvori de navigation forekommer.disse faktorer påvirker hinanden, og de kan ændre sig, snarere end at betragte hver enkelt af disse faktorer, vil vi blot se på resultatet: gøre sejlads poster være i en pæn række, eller er der nogle få presset ned til den næste replik?hvis det er det sidste, hvor mange ting passer?bevæbnet med disse oplysninger, kan vi vælge den rette navigation til jobbet.,,, trin 1: valg af breakpoints,, fleksible udformning indeholder to hovedelementer.for det første skal konstrueres, væske,: dens bredde vægte med bredde i browseren.for det andet er der, breakpoints,, bredder, som de konstruktionsmæssige ændringer gennem anvendelse af css medier forespørgsler.for eksempel, du kunne beslutte, at når browser ikke er større end 480 pixel, en aftale vil komme under indhold og og poster vil blive mindre.du kan få lige så mange eller få breakpoints, som du gerne ville.,,, du kan skabe en grænse ved hjælp af media - spørgsmål, som denne:,, @ medier kun skærm og max bredde: 480px) {* denne css kun vil blive anvendt til telefoner og andre små apparater.* /},, hvordan gør vi med at vælge breakpoints?en fremgangsmåde er at hente et par bredder, at hamle op med fælles anordning størrelser.,, twitter bootstrap har flere grænseværdier, herunder et "e" breakpoint, der er udløst af viewports ikke større end 480px.det har også en "portræt tabletter" breakpoint, der udløses mellem 768px og 979px.,, som de kan se, at der ikke er nogen "landskab tablet" breakpoint i støvlestrop.det er, fordi du er 1024 pixels hele landskab - samme bredde som mange desktop - skærme.det bringer os til den største svaghed i denne strategi: det betyder, at et kvalificeret gæt om typer af udstyr.en anordning, der rammer vores "portræt tablet" er måske en stor telefon eller en meget lille bærbare.,,, medier, skal ikke fortælle os, hvilken type anordning anvendes, men vi kan lave et gæt baseret på udstyrets størrelse.,,, en anden fremgangsmåde ville være at basere breakpoints om udformning og indhold.du kan gennemføre en flydende udgave af dit design med nr. 34, og så afprøve det på forskellige bredder.når du møder bredder, hvor tingene begynder at se mærkeligt ud, det er et godt tidspunkt at overveje at tilføje en grænse.det er den tilgang, begunstiget af ethan marcotte, der opfandt begrebet "responderende design".,,, som tilgang er den bedste?som med så mange ting i livet, det afhænger af.bruger du en præ - ramme som bootstrap?tror du, at det vil være lettere at forklare deres design til dit hold eller kunder, hvis du kan tale om specifikke typer af udstyr?hvis du svarede "ja", vælger grænseværdier baseret på anordning størrelse kan være rigtigt for dig.hvis du svarede "nej", vælger grænseværdier på grundlag af deres udformning og indhold kan give dig mere frihed og fleksibilitet.det er den tilgang, som vi vil tage i denne forelæsning.,,, trin 2: skrivning af avancen, lad os begynde at bygge en enkelt side.vi vil bygge en "artikel" område, som indeholder et indhold og en navbar.ved siden af den artikel, vi sætter en sidebemærkning.,, < artikel > < nav > < ul klasse = "navbar" id = "mainnavbar" > < li > < en href = "/" > hjem < /a > < /li > < li > < en href = "/produkter. html" > produkter < /a > < /li > <!- mere nav ting...--> \t\t\t<li><a href="/contact.html">Contact</a></li> \t\t</ul> \t</nav> \t<p>Here is our content.</p> </article> <aside> \t<p>Here is a side note about our content.</p> </aside>, ,Include ten or so navigation items in this list, for the sake of the demonstration., , , Step 3: Basic Styling, ,First, let's style our list to look a navigation bar., ,.navbar { \tbackground-color: #055; \tmargin: 0; \tpadding: 0; \twidth: 100%; \tline-height: 1; \toverflow: hidden; } .navbar li, .navbar a { \tdisplay: inline-block;\t } .navbar li { \tlist-style-type: none; } .navbar > li { \tmargin-left: .25em; } .navbar > li:first-child { \tmargin-left:0}. navbar en {polstring. 25em; tekst): ingen. højde: 1em; skrifttype vægt: dristigt, farve:&#fff.}. navbar a: den {baggrund farve:X.}, vil vi også gøre vores artikel stå her lidt og vise vores arealer som kom her.vi bruger procentdel værdier for vores bredder, for at gøre vores design væske.,, organ {skrifttype familie: uden serif; skriftstørrelsen: 16px; baggrund farve:&#fff;} artikel {baggrund farve:&#eee polstring: 2,5%; margen: 1%: bredde: 64%; flyde: venstre;} {baggrund bortset fra farve:&#ccc; polstring: 2,5%; bredde: 25%; flyde: venstre}, vores endelige resultat skal se sådan her:,,,, trin 4: tilføje en breakpoint, når vores bredde får særlig små teksten var så meget, at det bliver vanskeligt at læs.vi kan ordne det, ved at lade den artikel og til tage den fulde bredde, og skubbe til side under artikel.,, @ medier kun skærm og max bredde: 550px) (bortset fra artikel (bredde: 95%; flyde: ingen;} artikel {margen ret: 0; margen bund - 1em;}}, føle sig fri til at lege med vinduet bredde, og se, hvad der sker.i almindelighed, som det vindue bliver mindre, er der plads til mindre og mindre af sejlads.når du psykiater vinduet til 550px, selv om, - - at du ikke får en plads til sejlads, som bort falder til den næste linje.,,, antallet af punkter, som vi kan se i navbar afhænger af flere faktorer, herunder vinduets bredde, breakpoint, skriftstørrelsen, og antallet af poster i navigation.,,,,,,, løntrin 5: angivet en bestemt højde på navbar, i mange tilfælde vores navbar indhold ikke passer på en ordentlig linje.lad os ordne det!,,, hvis brugeren har javascript, vi gemmer ting, der ikke passer.vi skal vise dem i en dropdown menu senere.hvis brugeren ikke har javascript, vi lader navbar højde udvides efter behov.det er ikke kønt, men det er i det mindste funktionelt.,, til at gøre det, vi vil downloade og omfatte en sædvane, bygge på modernizr, en javascript bibliotek, der giver os mulighed for at afprøve træk støtte i browsere.vores skik bygge test for javascript støtte og røre omstændigheder støtte.,, vi kan tilføje en "er" klasse på vores tag.hvis brugeren har javascript, mozernizr vil ændre det klasse "er", hvis de bruger ikke har javascript, klasse vil remian "- er".,, < http: //klasse = "er" > < manuskript src = "modernizr. skik. er" > < /manuskript >,,, note: for driftsmæssige årsager, - - er det bedst at undgå at manuskripter øverst på siden.mens browser er optaget downloader manuskripter, det vil stoppe med at downloade filer, og at den side.i dette tilfælde, det er faktisk det, vi ønsker: vi ønsker ikke at vise noget, før vores browseren. er klasse er på plads.der er en lille forestilling ramte, der er forbundet med denne fremgangsmåde, som vi har mildnet noget ved hjælp af en sædvane, bygge på modernizr.hvis du har brug for, at "er" klasse og ikke til hensigt at anvende andre elementer af modernizr, du kunne gøre din side endnu lettere ved hjælp af en linje på stedet.,, nu hvor vi har et arbejde. js, klasse i, lad os bruge den til at gemme alle poster, der tager til en anden.,,. det navbar (højde: 1.5em; overløb: skjult.}, trin 6: tilføje flexmenu, næste, lad os hente flexmenu, en jquery stik af, der lader os undersøge, om alle punkter passer ind i navbar og udvise den relevante type menu.vi har også brug for jquery selv.sæt disse scripts nederst på side, således at de ikke blokerer for sider fra viser, mens de belastning.,, < manuskript src = "http: //ajax. googleapis. kom /ajax /libs /jquery /1.8.0 /jquery. min.js" > < /manuskript > < manuskript src = "flexmenu. min.js" > < /manuskript >, er vi også nødt til at sige flexmenu til at se på vores menu og resize som påkrævet:,, < manuskript type = "tekst /javascript" > $('# mainnavbar'). flexmenu(); < /manuskript >, nu, som vi resize side, en "mere" forbindelse fremkommer, når nogle af dem, der ikke passer på navbar.du kan svæve over eller udnytte dette link til at udvise en dropdown med disse ting.når side bliver for lille til mere end én eller to punkter for at vise, i navbar, vi er stillet over for et "menu" link.når du svæver over eller udnytte dette link, sejlads poster anføres.,,, har vi nu den opførsel, som vi vil, men de dropdown menu virker ret forfærdeligt.det er okay. - vi ordner det i det næste skridt.,,, trin 7: stil flexmenu, lad os nu tilføje nogle former for at gøre dropdown se bedre ud.vi vil også gerne tilføje en css pil ved den "menu" eller "mere" link til at gøre det klart, at disse forbindelser vil åbne en ud menu., med css pile, der er intet billede til last, og pile blive skarpt på højopløsende skærme.denne tilgang virker i alle moderne browsere samt ie8.hvis du har brug for at støtte ie7 eller tidligere, skal omfatte en image-based tilbagetræk.,,. flexmenu pop - up - {polstring: 0; baggrund farve:X margen: 0}. flexmenu viewmore > a. flexmenu viewmore > a: den {baggrund farve:ᗟaa.}. flexmenu viewmore > a: efter {display: i overensstemmelse med blok; indhold: "" grænse tilbage: 0.3em fast, gennemsigtig, grænse - ret: 0.3em fast, gennemsigtig, grænse - top. 0.4em faste hvide; margen: 0.4em. position: relativ; top: -. 1em.}. flexmenu-viewmore.active > a. flexmenu-viewmore.active > a: den {baggrund farve:X.}. flexmenu pop - up - > li > a. flexmenu pop - up - > li (display: blok.}. flexmenu pop - up - > li > a: den {baggrund -farve:aa;},,,, trin 8: tilpasning til touchscreens, nu har vi en toolbar, der fungerer godt med en lang række skærmstørrelser, men det er lidt svært at anvende på trykfølsomme skærm.touchscreens ikke yder så megen præcision som mus, og trackpads, så det er let at miss og udnytte de forkerte ting.for at løse dette problem, så lad os få det bånd lidt større og flytte dem lidt længere fra hinanden.,, modernizr, som vi tilføjede tidligere, giver en css klasse for hvert træk, at det kontrol.på anordninger med touchscreens, det vil sige den klasse "rør." på anordninger, uden touchscreens, det vil sige den klasse "ikke røre".,,. rør. navbar (skriftstørrelse: 1.25em;},,, fordi vi har udtrykt vores størrelser i ems' en, vi kan klatre op eller ned hele navbar i en skriftstørrelse.den ene tråd ovenfor (ok, techincally tre, som vi har fordelt det) tilpasses ikke blot størrelsen af teksten, men også størrelsen af de pile, navbar højde, polstring af forbindelserne, og forskellen mellem poster.,,, note:, rører klasse viser støtte til rør begivenheder, som lader jævnet røre input til web - applikationer.udstyr, der både har touchscreens og mus (f.eks. vinduer 8 medlemsstater) vil sandsynligvis få. rør klasse.de fleste røre anordninger simulere mus begivenheder for kompatibilitet formål, så er der i øjeblikket ingen måde at anvende modernizr til påvisning af anordninger med både touchscreens og mus.,,,, trin 9: fastsætte cross - funkiness,, hvis du trækker den demo for så vidt ie7, du vil sikkert se to problemer:,,, - resize vinduet, det tager nogle gange bliver skubbet under artikel, før vi slår vores breakpoint.,, ud menu er en pixel under bunden af "mere" forbindelse, så menuen forsvinder, når du prøver at svæve over det.,,,,,,, er det første problem på grund af ie7 håndtering af procentsatser.hvis man beregner en værdi, der inclues en brøkdel af en pixel, det altid runder op.det andet problem er sikkert forårsaget af et lignende spørgsmål, til at arbejde med dette spørgsmål, kan vi sætte en fast bredde på vores side i ie7.for at gøre dette, lad os først tilføje en "mindre end ie8" klasse øverst på vores side.,, <!- hvis det er [8] > < http: //lang = "en os" klasse = "ikke er lt-ie8" > <![endif] - > <!- hvis gte, dvs. 8] > <!- > < http: //lang = "en os" klasse = "er" > <!- <![endif] - >,, lad os tilføje nogle css, som fastsætter en specifik pixels bredde for artikel ud i ie7.den samlede bredde på disse områder, og den polstring, margen, og tillæg for afrunding, kommer ud til 901 pixels.,,. lt-ie8. flexmenu pop - up - {margen top. - 1px}. lt-ie8 artikel (bredde: 600px.}. lt-ie8 side (bredde: 200px.}. lt-ie8 organ (bredde: 901px;}, du kan også mærke, at den programmerbare, zoom - niveau ændringer, når du tager den fra portræt af landskab.for at løse dette problem, bare tag det javascript baseret fastsætter og reference den nederst på siden.dette spørgsmål er blevet fastsat i six 6.,,, yderligere læsning, brad frost er artikel responderende sejladsmønstre og komplekse sejladsmønstre for responderende design omfatter en lang række tilgange til sejlads på følsomme områder, luke wroblewski er også en stor ressource for fleksible og mobile design mønstre.især hans af lærred tilgang er ret smart. det lægger navigations - og andre sekundære indhold offscreen på små apparater.når brugeren haner en knap, indholdet af objektglas fra venstre eller højre. disse ressourcer kan ikke give en udtømmende liste, selvfølgelig.deres design er stadig en ung område, og du kan forvente en masse seje nye former for design skal anføres i fremtiden.måske vil nogle af dem være din!,