Publicarea articolului "Coloane dinamice inteligente folosind CSS și jQuery" a fost motivul pentru care a fost scris postul de astăzi. Esența este foarte asemănătoare și este vorba de dimensiunea fontului.
Sarcina este de a implementa o modificare dinamică a mărimii fontului site-ului în funcție de rezoluția ecranului, adică dimensiunea ferestrei browserului.
Înainte de a începe să descriu soluția, vreau să menționez două puncte:
În primul rând, voi descrie în detaliu lucrarea din scriptul jQuery și apoi va explica cum să îl aplicați pe o parte sau pe altul a site-ului web.
Pentru punctul de referință, am luat o lățime de 1000 de pixeli. De obicei, aceasta este lățimea minimă pentru care sunt amplasate site-urile. Să punem acest parametru într-o variabilă:
Acum setați dimensiunea minimă a fontului în pixeli, sub care nu va scădea:
Apoi citiți lățimea fișierului xml, care este, de asemenea, scris în variabila:
Determinați coeficientul cu care dimensiunea de bază (minimă) va fi înmulțită în funcție de dimensiunea ferestrei browserului. Cifra este obținută prin împărțirea lățimii documentului xml la lățimea de bază (minimă). Ie De exemplu, dacă lățimea ferestrei browserului este de 1600 pixeli, obținem un coeficient de 1,6.
Ne îndeplinim condiția: dacă lățimea documentului xml este mai mare decât lățimea de bază, atunci dimensiunea fontului este înmulțită cu coeficientul, rotunjind rezultatul la un număr întreg:
Acum, dimensiunea fontului ajustată ajustată este aplicată etichetei
:Toate liniile de mai sus sunt plasate în funcția funcție fontSize () <>. apoi executați această funcție după încărcarea documentului HTML și, de asemenea, după redimensionarea ferestrei browserului:
Iată întregul cod al scriptului jQuery, pe care l-am obținut ca rezultat:
Luați în considerare aplicarea scriptului de mai sus pe exemplul unei structuri de 3 coloane a paginii, care are următoarea structură a codului HTML:
Acum rămâne doar să folosim dimensiunea dinamică a caracterelor pentru blocurile la care vrem să o aplicăm. Să facem, de exemplu, să o modificăm în jurul întregii pagini, cu excepția coloanei din dreapta, iar în coloana din stânga o vom face ușor mai mică decât cea principală.
Este foarte simplu.
În primul rând. coloana din dreapta, pur și simplu setăm dimensiunea fontului fix și înălțimea liniei și scriptul nu o va afecta:
În al doilea rând. În coloana din stânga am introdus o dimensiune a fontului puțin mai mică:
În al treilea rând. aveți nevoie de etichetă
. sau specificați înălțimea liniei în em în blocul corespunzător, astfel încât să se modifice și dinamic.Aici, în principiu, asta e tot.
Dacă doriți să modificați dimensiunea fontului numai pentru un anumit bloc, de exemplu, #content. atunci ar fi mai logic să schimbăm corpul (în linia $ (# 'body #'). css ();) la identificatorul sau clasa dorită.
Nu este nimic și tu și mulți alții aveți opțiunea de a alege dimensiunea fontului nu numai cu browserul.
În plus, dacă dimensiunea este specificată în px, atunci IE nu funcționează.
Cred că un simplu utilizator, va fi mult mai convenabil dacă mașina este acolo, pentru nimic care să-l forțeze să facă gesturi suplimentare.
Totul, desigur, necesită testare și testare în condiții reale.
Iar scenariul este necesar cu ajustări mai ușoare și setări suplimentare, dar nu foarte greu de înțeles.
Nu este nimic și tu și mulți alții aveți opțiunea de a alege dimensiunea fontului nu numai cu browserul.
Da, pentru un motiv bun. Dar aici este un ALEGE. Și doriți să automatizați, privând utilizatorul de dreptul de a alege.
Cred că un utilizator simplu va fi mult mai convenabil dacă mașina este
Și am opinia opusă =)))
Iar scriptul este necesar cu ajustări mai fine și setări suplimentare
Sunt de acord cu asta. În această formă, ca și acum, este dificil să vorbim despre caracterul practic al scenariului.
Dima, ce-ți place sau nu, nimeni nu contează :)
Principalul lucru este că ar fi convenabil pentru utilizator, fără acțiuni inutile din partea lui, asta este ceea ce va spune pentru asta, doar datorită.
Suntem toți leneși, dă-ne un pistol submachine :)
În plus, nu toată lumea are o viziune de 100%.
Dar aici este un ALEGE.
Aici, același lucru poate fi argumentat :)
În viață, de multe ori nu există altă alegere, nimeni nu a murit din cauza aceasta, dacă totul se face în mod competent și sensibil, alegerea nu va fi, de fapt, necesară. Nu dați utilizatorului posibilitatea de a schimba setul cu cască și chip, poate că îi place "verdana" și "italic" cu "bold" în plus :)
De multe ori se pare că îi dăm pe cineva dreptul de a alege, de fapt nu este așa :)
În această formă, ca acum ...
Noi credem, noi facem, noi decidem :)
În general, până când nu există o soluție mai interesantă decât aceasta, nu mai pot argumenta mai departe =) Îmi doresc mult noroc în căutări.
Apropo, un subiect nenorocit, dacă majoritatea dimensiunilor sunt specificate în unități relative (em), nu numai dimensiunea fontului, dar și lățimea coloanelor și indenturilor, atunci se obține un aspect pseudo-cauciuc. Se pare că dimensiunea este fixă, dar dacă schimbați fontul de bază din cauza redimensionării, atunci lățimea coloanelor se va schimba.
P.S. pentru cei care nu vteme - corpul prezintă o dimensiune a fontului de 62,5% pentru simplitatea calculelor, deoarece 62,5% = 10px, devine ușor de calculat dimensiunile de exemplu 200px = 20em 12px = 1,2em. Este important să rețineți că em este relativ la blocul parental, adică dacă ați modificat dimensiunea blocului fontului, ar trebui să o luați deja din noua dimensiune de bază, dar pentru aceste scopuri există un lucru util - calculatorul em
Exemplul nu este foarte reușit. Schimbarea fontului dinamic are sens cu aspectul cauciucului, astfel încât dimensiunea textului crește proporțional cu dimensiunea blocurilor.
Răsuciți și uitați :)
Iată legătura. pe firul forumului unde această problemă a găsit o soluție fără biblioteca jQuery.
Exemplele sunt potrivite acolo.
Dim, totul a inceput, din postarea ta :)
Și, bineînțeles.
Vom aduce în minte - interes, em - tot ce vom încerca :)
Articole similare
Trimiteți-le prietenilor: