Használja az olvasható betűméreteket, használhatóságot
Számos különböző képernyőméret létezik. És meg kell győződnie arról, hogy a szöveg egyszerűen olvasható a legkisebb és a legnagyobb képernyőn. Például a HTML betűméret használatával.
Győződjön meg róla, hogy a betűméret bármilyen eszközre alkalmas
Ennek több módja van:- Alkalmazkodó téma / sablon telepítése;
- Adaptív tervezés / média kérések (CSS) használata;
- A webhely különböző verzióinak fejlesztése.
1. Egy adaptív téma vagy sablon megszerzése
A Google adaptív tervezést javasol. Egy adaptív téma segítségével megoldódik a betűméretekkel kapcsolatos probléma.
2. A Media Queries / Adaptive Design használata
Ha tapasztalata van a CSS-ben. és nem félsz megtanulni kezelni, hogy a szöveg könnyen olvasható legyen bármilyen képernyőméret esetén.
Hogyan működik a betűméret?
A stílusos betűméret HTML formátumban szerepel a CSS-fájlban. Ha a betűméret nincs megadva, a böngésző az alapértelmezett értéket fogja használni, amely általában 16 oldal.
A CSS-ben a betűméret beállítása a következő:
A betűmérethez különböző mértékegységeket használhat: képpont (px), pont (pt), em és százalék (%).
A betűtípus és az adaptív tervezés kiválasztásakor a Google a következőket ajánlja:- Használja az alap betűméretet - 16 képpont a CSS-ben. Más méretek szükség szerint állíthatók be a betűkészlet tulajdonságai alapján;
- A tipográfiai skála meghatározásához használja az alap skálahoz viszonyított dimenziókat;
- Szöveg esetén meg kell adnia egy függőleges helyet a karakterek között. Az általános ajánlás az 1,2 em vonalmagasságának használata. amelyet alapértelmezés szerint a böngészők használnak;
- Használjon korlátozott számú betűtípust és tipográfiai skálát.
Használja a CSS alapszintű betűméretet 16 képpontos felbontásban
Ez az ajánlás szerint az oldal betűméretét explicit módon kell megadni - 16 px. Ez azt jelenti, hogy a HTML CSS betűméretének értékét kell használni. amely a betűméretet 16 képpontra állítja az egész oldalra. Ez általában a "test" vagy a "html" elemen keresztül történik.
A tipográfiai skálák meghatározásához használja a dimenziókat az alapdimenzióhoz viszonyítva
Most, hogy alaplapi betűmérettel rendelkezünk az egész oldalra, meg kell adnunk más betűméreteket a H1 elemekhez. H2 stb. többet mutatott ki, mint az alap.
A fenti képen a H1 kód HTML-betűmérete "250%" -ként van deklarálva. A H1 szöveg két és félszer nagyobb, mint az alap 16px-je. Ez a "relatív méret". Ennek köszönhetően, ahol kijelentjük a betűméretet, mindig többszörösre állítjuk be, kisebbek vagy azonos méretűek az alapbetűt:
Ez biztosítja, hogy bármennyire is nagy az oldal a képernyőn, a betűméret arány mindig ugyanaz marad. Például a H1 betűmérete mindig két és félszerese az alapbetűtípusnak. Ez biztosítja a szöveg érthetőségét mobil vagy kis képernyőn is.
Szöveg esetén meg kell adnia egy függőleges területet a karakterek között, és talán minden egyes betűtípushoz, amelyet módosítani kell:
A betűk olvashatóságának másik fontos szempontja a szövegsorok közötti tér. A CSS-ben ez a tulajdonság "vonalmagasság".
A Google javasolja a 1.2 vonalmagasság használatát. amelyet alapértelmezésben a böngészők használnak. Ez azt jelenti, hogy a szövegsorok közötti távolság 1,2-szerese lesz a HTML stílusjegy-méretének.
Ehhez be kell jelentenie a vonal magasságát a CSS-ben:
Problémák a linklistákkal
A linkhez több helyre van szükség a mobileszközök képernyőjén. Ez problémát jelenthet, ha a hivatkozásokat számozott vagy felsorolt listákra helyezik.
A probléma megoldásához próbálkozzon:
Használjon korlátozott számú betűtípust és tipográfiai skálát
Hogyan lehet egy eszközön olvasható betűtípust készíteni?
A szöveg méretét a médiakérések szabályozzák, amelyeket különböző méretű képernyőn hirdetnek. Azt mondhatjuk, hogy a mobileszközökön egy szövegméret van beállítva, és a helyhez kötött számítógépeken egy másik.
Tekintsen egy példát egy média lekérdezésre, amely meghatározza a betűméretet.
Ez a betűtípus minden eszközön teljesen olvasható. Különösen, ha az összes fenti ajánlást követi.
Problémák merülhetnek fel, amikor a stílusok úgy vannak beállítva, hogy a helyhez kötött eszközökön a betűkészlet kisebb. Ebben az esetben a mobileszközökön ez a szöveg még kisebb lesz:
Ebben a helyzetben módosítania kell a média kérést. Az első példában a stílus-betűméret HTML azonos volt (100%) az álló számítógépek és mobileszközök esetében.
Tekintsünk egy média lekérdezést, amely kisebb, sűrűbb szöveget fog megadni a PC számára, de kisebb képernyőkre is jobban olvasható.
Ez a kód határozza meg, hogy a szövegnek az állomásos számítógépek alapértelmezett méretének 90% -ának megfelelő betűmérettel kell rendelkeznie. Mobileszközökön azonban a méret 110% lesz:
Ez azt jelenti, hogy a szöveg könnyen olvasható a különböző méretű képernyőkön.
3. A webhely különböző verzióinak létrehozása
A "Használható betűméretek használata" cikket a Saitostroenie projekt barátságos csapata készítette el az A-tól Z-ig.