By die ontwerp van u webwerf is dit belangrik om seker te maak dat dit goed lyk op enige toestel, ongeag die grootte en vorm van die skerm. Responsiewe webwerwe is ontwerp om goed te lyk op allerhande moderne toestelle soos rekenaars, telefone, tablette, TV's, draagbare en selfs motorskerms. Om 'n webwerf reageerbaar te maak, moet u u CSS- en HTML -kode verander om die elemente outomaties te verander, afhangende van spesifieke toestande. Hierdie wikiHow leer u hoe u basiese responsiewe webontwerp kan beplan en implementeer.
Stappe
Metode 1 van 3: Beplanning van responsiewe ontwerp
Stap 1. Vind uit hoe u gehoor u webwerf gebruik
Deesdae doen die meerderheid mense op die internet dit vanaf selfone en tablette. Om 'n webwerf te reageer, moet u seker maak dat dit behoorlik vertoon word, ongeag waar dit bekyk word. As tyd en geld uiters belangrik is, fokus dan op die tipe toestelle wat die gewildste by u gebruikers is (as hierdie inligting beskikbaar is) en hoe hulle u webwerf gebruik. Ontdek met behulp van u analitiese sagteware of 'n ander vorm van navorsing:
- Watter soort toestelle gebruik hulle die meeste om die webwerf te sien, met spesiale aandag aan handelsmerke van selfone/tablette/rekenaar en grootte/skerm/resolusie.
- Watter blaaiers is die gewildste onder u gebruikers? Wat globale statistieke betref, is Google Chrome die gewildste webblaaier wêreldwyd, maar Safari is 'n kort tweede.
- Hoe u besoekers u webwerf gebruik, soos hoeveel tyd hulle bestee om dit te kyk, waar hulle dit bekyk en watter inhoud die gewildste is. Dit kan u help om te bepaal watter tipe inhoud belangrik is om in te sluit en watter weggelaat kan word.
Stap 2. Ontwerp verskillende uitlegte vir verskillende toestelle
U kan 'n kombinasie van CSS en JavaScript gebruik om 'n gebruiker se toestel, sowel as die vermoëns daarvan (of dit Java, Flash, ens.) Ondersteun, op te spoor en 'n spesifieke weergawe van u webwerf daarvolgens te vertoon. CSS Media -navrae is veral nuttig om die grootte/resolusie van die toestel te bepaal.
Stap 3. Maak voorsiening vir verskillende tipes interaksies
U besoeker het moontlik interaksie met u webwerf met behulp van 'n muis, 'n sleutelbord, 'n raakskerm of selfs 'n skermleser vir gesiggestremdes. As u dit in ag neem, moet u webwerf reageer op muisklik, sleutelbordknoppies (Tab, Enter, Return, ens.)
Beweeg-oor-effekte werk met niks behalwe 'n muis nie. In plaas daarvan om hierdie effekte te gebruik, kan u die besoeker vereis om op 'n knoppie of 'n ikoon te klik om alles wat voorheen op 'n muisverwyser vertoon is, te vertoon
Stap 4. Oorweeg dit om 'n inhoudbestuurstelsel (CMS) te gebruik
'N Maklike manier om te verseker dat u webwerfontwerp reageer, is om 'n CMS te gebruik met 'n voorafgeboude responsiewe tema. Deur 'n CMS soos Joomla, Drupal of Wordpress te gebruik, kan u verseker dat u webwerf op alle toestelle goed lyk sonder om self die responsiewe elemente te kodeer. Raadpleeg u webverskaffer om te sien watter CMS -instrumente by u diens beskikbaar is.
Stap 5. Gebruik aanlyn gereedskap om u webwerf te toets
Noudat die responsiewe webontwerp in gewildheid toegeneem het, is daar 'n verskeidenheid gratis gereedskap wat u kan gebruik om u webwerf te toets. As u u webwerf al gekodeer het, gebruik hierdie instrumente om te toets hoe dit in verskillende omstandighede lyk, sodat u weet waar u die reaksie moet verbeter:
- Mobielvriendelike toets deur Google: laat u weet of u webwerf net so goed op mobiele toestelle werk as op rekenaarskerms.
- resizeMyBrowser: laat u u webwerf in verskillende resolusies sien.
- Verantwoordelike: Vertoon u webwerf op verskillende toestelskerms in verskillende uitlegte (sywaarts of regs).
Metode 2 van 3: Maak die bladuitleg responsief
Stap 1. Oorweeg 'n gratis, responsiewe stylbladraamwerk
'N raamwerk is 'n voorafgeskrewe stel HTML, CSS en/of JavaScript wat u as skelet vir u webwerf kan gebruik. Alle raamwerke is getoets en geoptimaliseer om met alle blaaiers te werk, dus al wat u hoef te doen is om u inhoud in te voeg, u media en kleurvoorkeure by te voeg en u webwerf te publiseer. 'N Paar gewilde raamwerke is:
- Bootstrap
- Geraamte
- Stigting
Stap 2. Stel die viewport met 'n metatiket
As u nie 'n raamwerk gebruik nie, wil u begin met die belangrikste aspek van die kodering van 'n responsiewe webwerf: die Viewport. Die viewport is die deel van die webwerf wat vir die gebruiker sigbaar is. Die sleutel om u werf behoorlik te laat vertoon, ongeag die skermgrootte, is om die grootte van die viewport in die META -tag te skaal. Om dit te doen, moet u hierdie etiket bo -aan elke bladsy op die webwerf insluit:
Stap 3. Spesifiseer die teksgrootte met betrekking tot die viewport
Sodra u viewport ingestel is, sal die teks op u bladsy skaal om by die skerm te pas. Lettertipes kan egter te groot of te klein vertoon word as die grootte daarvan nie gespesifiseer word in verhouding tot die viewport nie. U kan dit doen deur die lettergrootte te definieer as 'n spesifieke persentasie van die viewport met die vw -eenheid. In hierdie voorbeeld word die H1 -opskrifte vertoon om teen 10% van die breedte van die viewport te vertoon, ongeag die grootte:
wikiHow
Stap 4. Gebruik mediavrae om verskillende style vir verskillende skermgroottes te wys
Afhangende van die skermgrootte, kan u kies of u sekere CSS -elemente wil vertoon. U kan die besonderhede van u media -navraag in u CSS -lêer spesifiseer. In hierdie voorbeeld word die agtergrondkleur van die liggaam rooi as die skerm se grootte 480px of groter is:
wikiHow
@mediaskerm en (minwydte: 480px) {liggaam {agtergrond-kleur: aqua; }}
Metode 3 van 3: Reageer op beelde
Stap 1. Gebruik die CSS -breedte -eienskap om beelde te skaal
In plaas van om die breedte van die beeld op 'n spesifieke hoeveelheid pixels (bv. 500px) in te stel, gebruik 'n persentasie (bv. 100%) sodat die beeld na die breedte van sy ouer kyk en daarvolgens aanpas. Deur die breedte van 'n beeld op 100% te stel, dwing die beeld om op en af te skaal, afhangende van die grootte van die skerm van die kyker. Om dit in lyn te doen:
Stap 2. Gebruik die maksimum-breedte-eienskap om die grootte van die prentjie te beperk
As u die breedte -eienskap in die vorige stap gebruik om 'n beeld na 100% te skaal, sal die prentjie groei of krimp om 100% van die houer te pas, ongeag die grootte. Dit beteken dat as die beeld aan die kleiner kant is, dit groter sal wees as die oorspronklike grootte en dat dit van minder kwaliteit lyk. Om te verhoed dat dit gebeur, gebruik die maksimum breedte om die prent se maksimum skaalgrootte op 100% (die werklike grootte) in te stel. Hier is hoe:
Stap 3. Gebruik die HTML -prentelement om verskillende beelde op verskillende skermgroottes te vertoon
As u beelde in persoonlike grootte wil skep om op verskillende skerms te vertoon, kan u spesifiseer watter foto's in u HTML-kode vertoon moet word. Skep beelde van verskillende groottes en gebruik dan hierdie kode as 'n voorbeeld om aan te dui watter prent op 600px en 1500px breedte skerms gebruik moet word:
