en "betyder" tilgang til medier, forespørgsler og layout

"betyder" tilgang til medier, forespørgsler og layout,,,, der er forskellige tilgange til flere beslutningsforslag venlige web - design og anvendelse af medierne, som har vist sig i de seneste år.nogle af de ting, du har sikkert allerede hørt om omfatter:,,, "mobile", - - med udgangspunkt i en snæver telefon orienterede bredde ca. 320px og så vokser i størrelse fra der.,, "stationær ned" - begyndende med en fuld størelse design og nedtrapning, som kræves, "indhold først." - om test indhold i begyndelsen af processen, og at det gradvis ca.,, "anordning specifikke" - rettet mod en række anordning konkrete beslutninger med breakpoints på tilsvarende varer, værdier, f.eks. mobiltelefoner i 320px til 480px, tabletter på 768px til 1024px, 1200px + for desktopcomputere osv. "anordning agnostiker", - at skabe en konstruktion, der passer alle "system, som passer til enhver beslutning, fleksibelt,.,,,, guldlok tilgang", - - base skriftstørrelse til browseren eller bruger, som foretrak, så bygge en em, drevet layout på toppen af det med tre opgaver: "for stor", "lille", "lige". i denne artikel, jeg vil tale om en metode, der er en blanding af nogle af de ovenfor, med et par ekstra omrøring i.det er både "indhold" og "anordning agnostiker" og blev oprindeligt inspireret af den typografi fokuseret, em, baseret på "guldlok tilgang".,,, jeg synes, det er   "betyder",   tilgang.de design, som følge af denne fremgangsmåde:,, er optimeret for det enkleste, mest tryg ved erfaring, baseret på forskning, data vedrørende øjenbevægelser blandt gennemsnitlige læsere. fluidly tilpasning til enhver beslutning, selv om den seneste "8.3459 tomme køleskab telefon",., proportionalt omfang sammen med browser eller brugeren skriftstørrelse indstillinger.,,, de idéer, som omfatter denne tilgang ikke er nye, men de er blandet sammen om at skabe en særlig smag af deres design.,,, og at gå videre med denne smag jeg vil også være sammen med dig et manuskript, der hedder ", rdbl", som jeg har skabt for at hjælpe de vurdere, hvordan at læse din tekst indhold på forskellige punkter.selv hvis du ikke vedtage "betyder" metode, de måtte finde det lille dims hjælpsom i, hvad der bestemt tilgang gør brug.,, "læse" principper, er der fire enkle principper, som danner grundlaget for denne "betyder" tilgang, men hvor man gennemfører dem vil variere noget fra design til den næste. , de er som følger: 1.sæt ikke eksplicit base skriftstørrelse. overlad det til - eller brugeren foretrækker, at efterlade de misligholdelser, og ikke om et udtrykkeligt retsgrundlag skriftstørrelse for deres dokument er et koncept, jeg blev indført som guldlok tilgang, den generelle tanke bag dette er baseret på følgende:,, browsere har misligholdelse minimumsskriftstørrelse på plads, som anses for at være de mest læselige for forskellige anordninger, afhængigt af beslutningsforslag og ppi. brugerne kan også fastsætte deres egne misligholdelse skriftstørrelse på et niveau, der er   bekvemt for dem., ved ikke at overordnede disse misligholdelser med din egen base skriftstørrelse, kan du give dit design tekst til automatisk resize afhængigt af browser og brugernes præferencer.det giver dig et forspring med læsbarhed på forskellige anordninger og for personer fra starten. og, i nogle tilfælde kan du få til at foretage justeringer, hvis en skrifttype, er særlig stor eller lille i forhold til de fleste andre skrifttyper ved misligholdelse størrelse.der kan være betydelige forskelle mellem den faktiske størrelse af to skrifttyper, selv hvis der påstås at være af samme størrelse i kode.,,, hvis du har brug for omfattende misligholdelse skriftstørrelse for at normalisere det, gøre det med en relativ værdi, dvs. procentdel eller dem, som anvendes til, html element.på denne måde deres samlede tekst størrelse vil stadig være fastlagt af browser /bruger indstillinger, og resten af principperne for denne fremgangsmåde kan gennemføres,.,, html (skriftstørrelse: 100%},,,, 2.dumme indhold ind i begyndelsen af designprocessen, ikke afslutningen, når vi tænker på web "design", det er let at blive fanget i "design" er en del af processen, og at tilføje indhold kun som sidste del af processen efter alt det andet er på plads.,,, men i vores tilgang tekst indhold indsættes i begyndelsen af processen, før en visuel stil på alle anvendes.den hårde overordnede proces er:,,, indsæt virkningsløs tekst i afsnit, eller artikel element., udvælge, skrifttype, familie og skrifttype, vægt, indstillinger, der vil blive anvendt, tilføje relativ enhed baseret på css til kontrol af layout omkring denne tekst på en sådan måde, at den vil optimere læsbarhed (på dette i den kommende sektioner). tilsættes visuel stil som en slags "maling" over toppen af konstruktionen, justering, hvis det kræves.,,, det er først og fremmest det modsatte af processen blev populær i fortiden, hvor udformning ville begynde med visuelle stil i psd, så ville blive genereret css layout - kode den passer til design, typografi css - kode vil blive tilføjet, at efterligne det, der var i psd og endelig nogle dumme tekst tilføjes til demo det færdige produkt, grunden til.vi har vendt denne proces er:,, for en visuel "maling" for at kunne tilpasse sig langs med en fleksibel udformning, du har brug for at vide, hvad det layout er. for at skabe en fleksibel, læsbarhed optimeret layout, du har brug for at se, hvordan tekst, vil det vise sig, i browseren. for at se, hvordan teksten vil synes du skal vide det, skrifttype, familie og skrifttype vægt på grund af variansen i størrelse, de kan medføre, at vælge og anvende skrifttype, familie og skrifttype, vægt, kulisser, du skal dukke tekst.,, så selv om justeringer til typografi indstillinger kan bestemt gøres senere i proces, som en del af polering konstruktion, de væsentlige valg af skrifttype, familie og skrifttype, vægt, bør anvendes til at dumme tekst på indretning og design.,,, 3.bygge dit design i relative% og em /rem - værdier, ikke varer, i denne strategi som en generel regel, du ikke bruger, forsyning, enheder.i stedet for alt fra højde & bredde, margener & polstring, at grænse radius & bredde er fastsat i relativ,%, og em, /rem, enheder, er de primære årsager til dette:,,, ved hjælp af,%, værdier, layout, indpakning og kolonner. du kan skabe en konstruktion, der fluidly strømme i bredde mellem din breakpoints, snarere end at hoppe fra en bredde på den næste. ved hjælp af em /rem, værdier, alt andet hele dit design omfang proportionalt med browser /bruger, der baserer skriftstørrelse.,,, flydende% baseret på papir & kolonner,,,, at skabe et papir om dit design, der vil gøre det muligt for væske ind til viewport mellem breakpoints, anvendes følgende teknik:,,. papir (bredde: 100%; max bredde: 40em;},,,for det første, vi sætter papir skal være 100% af de viewport bredde.det betyder, at en gæst se dit design til et sted mellem to af dine breakpoints, vil de ikke se tom rum rundt. det vil i stedet være ordentligt skylning med kanterne., dog tekst på 100% bredde på en bred skærm ikke vil være let at læse på alle.vi indleder en max bredde, fastsættelse af 40em betyder, at selv om en stor overvåger stedet er papir vil aldrig være større end dette beløb.denne værdi kan justeres yderligere for læsbarhed som beskrevet i nedenstående afsnit,.,, kolonner i dette papir, også kan have, i%, værdier, der gælder for dem, i stedet for varer, så vil de også fluidly tilpasse sig inden for viewports.fyld og grænser kan anvendes til procentsats baseret kolonner i em, værdier, uden at de layout, ved at sikre, at deres design, rubrik dimensionering, ejendom, er fastsat til grænse boks.margenerne i kolonne bør fastsættes i% værdier.,,, note: læse mere om at arbejde med denne type layout system i min artikel om net mixins.,,,, ensartet skalerbare em /rem - indretning,,,, ved hjælp af em /rem, i stedet for varer, de forskellige layout aspekter af deres udformning, vil altid have de bedst mulige forhold til din tekst indhold.uanset hvad, at browser eller bruger basen skriftstørrelsen på hele dit design omfang proportionalt, hvis ellers tekst ville ændre størrelse inden for en fast beholder:,,,,, ikke kun dit design ser bedre ud, hvis det satser forholdsmæssigt, men det vil være lettere at læse så godt.vi skaber afstand omkring tekst indhold meget med den målsætning at gøre det så let som muligt for de besøgende at læse, at indhold.kun hvis afstanden er forseglet, sammen med   tekst størrelse, kan vi sikre, at vi bevarer fordel af disse nøje udformet layout elementer.,,, 4.hold din primære tekst indhold i en ideel række anslag pr. linje, naturligvis i en "betyder" metode, det centrale fokus på tekst, indhold og præsentation.de fleste steder er et område, hvor deres primære indhold er afholdt, og vi begynder med at optimere det rum for læsbarhed.når det primære område er optimeret resten af layout er bygget op omkring det.,,, den måde, hvorpå vi optimere primære område for læsbarhed er ved at satse på en ideel række anslag pr. linje, som i henhold til forskning, vil være den mest behagelige og naturligt for en gennemsnitlig læser.,,, anslag pr. saccade, saccades pr. linje,,,,,, når vi læser teksten, de fleste mennesker ser ikke på hvert enkelt brev eller et ord på et tidspunkt.i stedet, er vi tilbøjelige til at styre vores øje i gruppen af personer i en tid med perifere udsyn til at tage dem alle.hver gang øjnene bevæger sig fra den ene gruppe af personer til næste hop, kaldes en "saccade".en saccade kan dække alle steder fra 1 - 20 tegn, men er gennemsnittet mellem 7 og 9, hvis der er for mange tegn /saccades pr. linje øjne bliver anspændt og træt, og hvis der er for få læseren at knække fokus til at gå til den næste linje for ofte til at optage indholdet.,,, der er en debat om det nøjagtige antal saccades den almindelige læser er behageligt at gøre pr. linje, men efter megen forskning, jeg fandt, at omkring ni er en værdi, der har tendens til at være almindelig enighed.på grundlag af disse tal, for at optimere læsbarhed for den almindelige læser antallet af personer pr. linje skal være mellem 63 (for syv saccades) og 81 (ni saccades).,, note disse tal bør anvendes som en generel vejledning.strengt taget er en læser, der kæmper i høj grad tager måske kun i ni bogstaver i ni saccades, mens en højt kvalificeret læseren kan træffe et hundrede og firs.så mens du bør målet for dette interval, hvis deres layout er en smule højere eller lavere end det område, det er helt fint.,, hvordan til at gennemføre   "betyder", nu du er bekendt med de principper om "betyder" jeg går igennem, hvordan til at gennemføre dem på en baglæns salto.jeg vil gøre dette ved at vise dig, hvordan den demo for rdbl manuskript, som jeg nævnte tidligere, blev oprettet.,,,,,, det er bare sort "programmør kunst" på grund af demonstrationer, men man kan anvende disse principper og teknikker til næsten ethvert design, stil.,,, begynde med at finde den maksimale læsbare em baseret bredde,,, for at holde din primære område til et maksimum på ca. 81 personer pr. linje, du bliver nødt til at begrænse dets bredde, selv for bredskærms opstillingsskemaer.dette er normalt svarer til en maksimal bredde på omkring 35em - 40em give eller tage et par »ems«.,, det her bånd til, hvad vi dækket ovenfor vedrørende vores væske på papir på 100% bredde med højst ca. 40em. det maksimale bredde indstilling vil være en af de værdier, man vil, for at holde dine anslag pr. linje under den øvre læsbare grænse.så hvis du er at skabe et enkelt kolonne design, din hjemmeside er ydre indpakning, ville være et sted omkring 35em - 40em plus uanset polstring beløb, du sted omkring teksten.,,, hvis du er at skabe en multi - kolonne design på den anden side, kolonnen bredde ville også tilføjes til den samlede bredde på dit papir.for eksempel, hvis deres primære område skulle ikke være større end 40em og var inde i en kolonne med en bredde på 66,66%, med en aftale næste til 33,33%, din ydre indpakning element vil have en max bredde, fastsættelse af ca. 60em. dette kan forekomme kompliceret først, men det er faktisk noget, det er ganske ligetil at gennemføre i praksis, som du vil se nedenfor.,,, uanset hvad du gør med din udformning, vil du finde ud af den maksimale bredde din primære område skal blive inden for intervallet, læsbarhed først.når din øvre grænse er fastsat, kan du begynde at tilføje andre layout elementer, så fluidly optimering af så meget som muligt for hele området mellem det maksimale bredde og nul.,,, ved at læse første du vælger ikke at sætte en bestemt type af udstyr som f.eks. stationære eller mobile først.men du overvejer, alt udstyr og - resolutioner og planlægning for dem samtidig fra begyndelsen.,,,,, ved hjælp af rdbl for at finde deres maksimale læsbare bredde, i første omgang, jeg brugte en kombination af nedskæring min browser, bredde udskrift, stik af, en rolle i modstrid, ildflue og en lommeregner, for at finde ud af, min største bredde.men før påbegyndelse af denne artikel, besluttede jeg at gøre mit liv og dit lidt nemmere med et manuskript, som vil styre hele processen for dig.du kan få en kopi af manuskriptet github.,, rdbl vil give dig et lille kiks - bar over dit design og udlæsning af forskellige oplysninger, du vil finde nyttige som en del af denne proces.bare fortæl det, som en del af deres område, er, at du er rettet mod at vurdere læsbarhed, dvs. deres primære indhold, og det vil fortælle dig, hvis dette element er "for meget", "for snævert" eller "område".,,, note: manuskriptet automatisk vil finde en artikel,,, afdeling, eller de vigtigste et (i den rækkefølge), men de kan også få adgang til klasse navn eller id i "target - indhold element" område i stedet.,, du kan trække lidt slider for at resize din hjemmeside (denne emulerer nedskæring browseren i en mere overskuelig måde), og automatisk opdatering udskriften hen ad vejen.When the little green "In Range" display turns red you can look at the information displayed to see what point this occurred at.,,You can use the information displayed to determine the maximum readable width of your primary content area, and to that end there is also a rough estimate displayed of what that readable range will be.,,,In this example I have started with some dummy content in a very basic HTML layout, placing an ,article, element inside a ,main, element wrapper (you can use whatever tags you prefer):,,<main> <article> <h3>Heading</h3> <p>Put a few paragraphs of dummy text here.</p> <p>I personally like Samuel L. Ipsum.</p> </article> </main>,,,,Note,: As part ofdin html dokument, sørg for at omfatte viewport   meta - mærke, så medierne, lægger du senere vil reagere på det punkt, du forventer på udstyr af forskellige pixeltæthed:,, < meta - navn = "viewport" indhold = "bredde = anordning bredde, oprindelige omfang = 1, 0" >,,, jeg så også anvende nogle meget grundlæggende forskning, der efterlader misligholdelse skriftstørrelse alene fastsætter, rubrik dimensionering, ejendom, grænse boks,   skaber en flydende papir rundt om min indhold, sætter min primære tekst indhold at anvende, skrifttype, familie, "åben" sans "fra google webfonts, og den skrifttype vægt, i denne tekst, 400,:,, * {æske størrelsessortering: grænse boks - - box størrelsessortering: grænse boks}: organ {polstring: 0; margen: 0; skrifttype familie:" åben "sans"} vigtigste (bredde: 100%; max bredde: 40em; margen- 3em auto;} h3 (font vægt: 700;} artikel (font vægt: 400;},,, det er alt jeg har brug for at finde ud af den maksimale læsbare bredde for tekst at anvende den skrifttype, familie og skrifttype, vægt, gennem rdbl, ved at gøre følgende.,,, jeg belastning mit simple opstilling i firefox og se, om den lille læsbarhed flag, røde eller grønne:,,,,, på 40em bredt denne tekst kommer op på ca. 85 personer pr. linje, som er lidt for højt.det er et gennemsnit, der er taget fra første afsnit i teksten i det pågældende element.,, jeg har to muligheder.den første er at benytte sig af den øverste del af "anslåede læsbare em rækkevidde" vises på læse min maksimum, som i dette tilfælde er 38.117em. dette er imidlertid et skøn, så jeg kan også anvende en gradvist at skrumpe stedet, før jeg ser læsbarheden flag skift til grønt og tage dem bredde, der vises på dette punkt:,,,,, dette viser sig at være 38.5em, ret tæt på skøn.så jeg ændre max bredde fastsættelse af papir til denne værdi:,, primære (bredde: 100%; max bredde: 38.5em; margen: 3em auto.},,, og her rdbl nu viser, at teksten er inden for rækkevidde på sin maksimale bredde læsbar.,,,,,,, at polstring,,, nu hvor jeg ved, min største læsbare bredde er 38.5em vil jeg gerne tilføje noget polstring omkring kanterne af dette indhold.jeg skifter css for min artikel element, som følger (med en baggrund, farve, så du kan se den polstring), artikel (font vægt: 400 og polstring: 1.25em 2.25em; baggrund:&#f5f5f5;},,, for at gøre det muligt for de ekstra 2.25em bredde på arbejdsområdet på hver side af den artikel, jeg tilføjer 4.5em til de vigtigste indpakning, max bredde.du kan automatisere denne proces ved at anvende ccs preprocessor variabler.,, primære (bredde: 100%; max bredde: 43em; margen: 3em auto.}, nu på genopfriske polstring tilføjes, men som indvendige bredde på 38,5 em er blevet bevaret læsbarheden flag er stadig grøn.,,,,,, multi - kolonne opstillingsskemaer,,, hvis jeg designer en enkelt kolonne layout, jeg ville være i stand til at gå videre til næste fase af oprettelsen af breakpoints nu at vide, at min primære indhold er fastsat ved den maksimale læsbare bredde.men hvad med multi - kolonne opstillingsskemaer?,,, processen er stort set det samme som ovenfor: bare skabe din multi - kolonne opbygning med fleksibel procentsats baseret bredder, så krymper dit sted, med rdbl slider bar, indtil du finder den ikke, max bredde, anvendelse på dit papir til at holde deres indhold i læsbar rækkevidde.,,, at omsætte denne opstilling af en enkelt kolonne layout multi - kolonne ved at tilføje en aftale, vil jeg starte med at tilføje en sidebemærkning element i min html efter artikel element:,, < bortset > sider på < /bortset >,,, jeg vil tilføje nogle css at gøre artikel og til elementer i procent bredde baseret kolonner.fordi jeg er at tilføje en ekstra kolonne de vigtigste papir vil nu også skal være bredere for at imødekomme det.men jeg er ikke sikker på, hvad bredde posen bør være at passe ind i den nye aftale, og stadig holde indholdet på læselig bredde.,,, som jeg midlertidigt kommentere de vigtigste indpakning, max bredde, hvori der.dette vil gøre det muligt for mig at bruge den rdbl slider bar skala layout ned fra 100%, indtil jeg finder den nye ramme, der skal anvendes, primære (bredde: 100% /* max bredde: 43em; * /margen: 3em auto;} h3 (font vægt: 700;} artikel {flyde: venstre; bredde: 65%; skrifttype vægt: 400 og polstring: 1.25em 2.25em; baggrund:&#f5f5f5;} {flyde ud: venstre; bredde: 35%; polstring: 2.25em 1.25em; baggrund:&#ccc.},,, jeg så opdater siden og som før, til gradvist at reducere den bredde opstilling til læsbarheden flag bliver grønt.,,,,, når flaget bliver grønt "aktuelle dokument bredde" udskrift, viser en værdi af 66.25em, så jeg uncomment min vigtigste indpakning er max bredde fastsætte og ændre den til 66.25em. nu har jeg en væske tw -o kolonne layout, hvor det primære indhold er fastsat i læsbar vifte af misligholdelse,.,,, du kan bruge den samme tilgang til lige så mange piller, som du vil, at nulstille din indpakning, max bredde, så at skære ned på deres opbygning med rdbl, indtil du finder den nye værdi, der skal anvendes, for at bevare din primære indhold er læsbarhed.,,, finde læsbarhed pause punkter og optimere via medierne, søgninger, oprindeligt udtrykket "breakpoint" ikke havde noget at gøre med noget, der er brækket.men i forbindelse med denne metode, vi tager ordet helt bogstaveligt.med vores største læsbare bredde i vores design, kan vi begynde at skære ned på at finde "point", som vores læsbarhed "brud", dvs. når rdbl viser sin røde flag.vi kan tilføje, at justere layout media på hvert af disse punkter, ved hjælp af rdbl slider bar at begrænse bredden af de to kolonne layout, første punkt, hvor det røde flag, dukker op igen, er 54.812em, denne gang med "for snævert" på grund af personer pr. linje er faldet til under 63. det er den første,,,,, læsbarheden "pause", og så vil jeg skabe et media forespørgsel for at forhindre, at den primære område når frem til dette punkt.jeg vil gerne gøre tilpasning forud for layoutet bliver for snævert, så bruger jeg rdbl slider bar for at angribe den bredde op igen, bare nok til at gå tilbage til det grønne flag.på dette tidspunkt er det læste jeg i 55em bredt.jeg kopiere indholdet af "media forespørgsel kode" område, og sæt det ind på mit css:,, @ medier (max bredde: 55em) {*... * /},,, jeg nu er nødt til at finde den bedste måde at tilpasse udformningen på dette punkt.jeg ved fra den tidligere fælles kolonne fase af udformningen af de primære indhold for en maksimal bredde på 43em. det betyder, at 55em ville være for stor for den primære indhold for at fylde som en enkelt kolonne, så jeg kan ikke bare flytte den aftale af vejen helt endnu.jeg kan bare reducere dets størrelse, der giver indhold til at tage mere plads.,, jeg gør dette ved at nedsætte den procentsats af bredden af den til side element, og andelen af bredden af den artikel element:,, @ medier (max bredde: 55em) {artikel (bredde: 70%) til (bredde: 30%),,, jeg genopfriske den side og begynde at skære ned på igen, og denne gang jeg kommer forbi 55em med hovedindholdet i læsbar rækkevidde.,,, det næste punkt, på hvilket læsbarhed pauser er på 50.875em, når teksten igen bliver for snævert.igen, jeg trykker den bredde, bare nok til at komme tilbage til de grønne, og kopi medierne forespørgsel fra den rdbl dims, denne gang på 51em. det er stadig for store til at konvertere opstilling til en enkelt kolonne så endnu en gang jeg øge artikel bredde og mindske aftale:,, @ medier (max bredde - 51em) {artikel (bredde: 75%) til (bredde: 25%;}},,, - - den næste læsbarhed bryde punkt forekommer på 47.5em og gruppemøde nu mindre for at gøre det mindre.men jeg er stadig lidt højere end de oprindeligt fastsatte 43em på de vigtigste papir med henblik på at blive læsbare i en enkelt kolonne.så hvad gør jeg?,,,,,, svaret er at gå videre og ændre opstilling i en enkelt kolonne på dette punkt alligevel, men at tilføje nok polstring til artikel element, at indholdet i stadig vil være i læsbar rækkevidde.så jeg skabe et nyt media søgning på 47.75em, øge artikel polstring til 4em og omdanne opstilling til en enkelt kolonne:,,, @ medier (max bredde: 47.75em) {artikel {flyde: ingen; polstring: 4.5em; bredde: 100%} {flyde ud: ingen; polstring: 4.5em; bredde: 100%}},,, - opstilling er nu i læsbar rækkevidde på en enkelt kolonne, når det bliver mindre end 47.75em.,,,,,, fortsætter med at skære ned på det næste punkt, hvor læsbarhed pauser er 40.187em med den tekst, der er for smalt.indretningen er allerede i en enkelt kolonne, så nu er den eneste ting at gøre, for at give mere plads til indholdet er at reducere den polstring.for at gøre dette skaber jeg en forespørgsel til 40.5em medier og polstringen tilbage til sin oprindelige beløb.,, @ medier (max bredde: 40.5em) {artikel (polstring: 2.25em 1.25em;} {polstring til: 2.25em 1.25em;}},,, med det endelige medier spørgsmål i udformningen, nu kan gennemføres sikkert kravlede hele vejen ned fra den fastlagte maksimale bredde, bor i læsbar rækkevidde og fluidly fylder viewport hele tiden.,,,,, skal du gentage alle de ovennævnte foranstaltninger til dig selv, at du ser på dette punkt, at hvis du skrue ned for yderligere igen, vil du se "for snævert" red flag.men du har allerede optimeret for læsbarhed i størst muligt omfang.man kan ikke reducere polstring yderligere uden at forringe læsbarheden af under tekst for tæt på kanten.du kan også tror, at nogen ser på denne størrelse er sikkert på en lille anordning, således at skriftstørrelse mindre vil også yderligere kun skade læsbarhed.,, som sådan, selv om teksten vil væk under det mindste tegn pr. linje beløb fra her ned, vil du har rent faktisk allerede optimeret for læsbarhed på alle disse små størrelser. som muligt.,,, men "for snævert" flag under dette punkt er ikke af stor betydning, som anordninger, kan kun ser på en størrelse mindre end dette omfatter kun 2,9% af mobile rum, og selv da vil de kun er ca. 5 - 6 personer pr. linje for få der er stadig acceptabel.,, at din visuelle stil "maling", når du har din fuldstændig læsbarhed første væske indretning idu ved, hvad du har at arbejde med, for så vidt angår anvendelsen af visuelle stil.faktisk vil være tilbøjelige til at skabe nogle unstyled skemaer, som disse og bruge dem mange gange med forskellige design, der anvendes, som de anvender deres visuelle stil kan de få behov for at justere udformningen til en vis grad, og hvis så bare brug rdbl at holde abstinenser indstillingerne for at sikre, at de forbliver i læsbar rækkevidde.,,, jeg vil ikke gå i detaljer om design her, men der er et par generelle henstillinger, som jeg har for at holde din hjemmeside væske:, så vidt muligt i stedet for at bruge css3 billeder (f.eks. skygger, stigninger, afrundede hjørner, grænser, lyser) som styles skabt på denne måde er fuldt skalerbare, så længe em /rem - værdier anvendes. brug skrifttype ikoner (f.eks. fontello) i stedet for billede ikoner, som de vil også omfang sammen med, makker.wser /bruger skriftstørrelse. hvor du har billeder som baggrund, forsøge at sikre, at de kan være flisebelagt fylde, hvad rummet dit design skal målestok til at passe.,,,,,, hvis du er vant til at arbejde med photoshop i at skabe stærkt image drevet konstruktionselementer, som du har lyst til at se med adobe kant tilbageførsler i stedet som et middel til at skabe css3 stilarter på en sådan måde, at de er bekendt med.tjek lige min artikel om "5 nyttige ting, du kan gøre med tilbageførsler nu" for flere oplysninger om denne mulighed.,,, ekstra bemærkninger, drikkepenge og indpakning, de teknikker, som vist i gennemførelsen af afsnit i denne artikel, er blot et eksempel på, hvordan man kan sætte "betyder" tilgang til arbejdet.der er ingen hårde og hurtige regler for, hvordan man beslutter at behandle læsbarhed "point", og hvis du ville komme med helt forskellige justering valg, end jeg har gjort i den samme situation, som er helt fint. hvert design er forskellige, og det burde du forventer at træffe nogle afgørelser under anvendelse af denne fremgangsmåde.hvis noget ikke passer til dig, så gå og ændre den acceptable anslag pr. linje mellem rdbl anvendelser, for med alle de afviger fra en skrifttype til en anden, det er umuligt at gøre det til en eksakt videnskab.,,, du kan ændre anslag pr. linje rækkevidde til enhver tid ved at ændre de værdier, direkte i den dims, eller du kan spise i din foretrukne rækkevidde, når du løber manuskriptet er initialization funktion, f.eks. init_rdbl (63, 90);,,,, som du skære din indretning, op og ned. du skal ikke bekymre dig, hvis du ser et kort glimt af den røde "for meget" eller "for snævert" flag.hvis der er for få tegn, der viser, om 0.001ems bredde, det er ikke noget særligt.så længe du kun se det røde lyn et øjeblik kan du overveje din indretning skal være i læsbar rækkevidde.,,, jeg håber at have fortalt dig nogle nye idéer til, hvordan du tilgang din indretning proces, og i det mindste et nyttigt redskab i form af rdbl manuskript.er det sjovt at lave dit eget indhold først anordning agnostiker, "betyder", stedet design.,













Previous:
Next Page: