Când am dezvoltat un proiect, m-am confruntat cu provocarea de a implementa aspectul adaptiv. Pagina HTML a trebuit să arate diferit pe ecrane de diferite dimensiuni. În același timp, ar trebui să fie ușor, deci nu am vrut să folosim cadre grele de css. Astfel, am creat bicicleta proprie, pe care vreau să o împărtășesc cu Habransobschestvo. S-ar putea să existe deja astfel de soluții, dar nu știu despre ele.
Esența abordării este după cum urmează. Mai întâi, în blocurile HTML sunt marcate, care ar trebui să difere în funcție de dimensiunea paginii. Aceasta se face prin adăugarea unei clase suplimentare de "scr". Apoi, în CSS, definim maparea acestor blocuri la diferite dimensiuni. Acest lucru se poate face într-un fișier CSS separat.
Tot ce trebuie să implementăm este câteva linii de cod JS și o bibliotecă jQuery (în cazul meu am folosit JQLite - o versiune trunchiată a jQuery).
Deci, scriptul nostru JS:
Ce face scenariul. Definește mărimea curentă a paginii și, la încărcare sau la schimbarea mărimii, la toate elementele marcate de clasa "scr", adaugă o clasă suplimentară "scr-XX". În cazul în care XX este diferit, în funcție de dimensiunea paginii și poate fi:
- scr-xs - dispozitive mobile (<768px)
- scr-sm - tablete (≥768px)
- scr-md - ecrane convenționale (≥992px)
- scr-lg - ecrane mari (≥1200px)
După cum puteți vedea, dimensiunile au fost luate din cadrul CSS-Bootstrap.
Acum, pentru a defini comportamentul elementelor pentru dimensiuni diferite, trebuie să le descrieți în CSS. Și, puteți descrie doar ceea ce se va schimba, restul va fi moștenit de la definiția originală a elementului. Și puteți schimba blocurile după cum doriți, inclusiv ascundeți (afișați: nici unul).
Aici schimbăm elementul cu clasa "my_block". Pe tablete, dimensiunea și lățimea fontului vor fi modificate. Și pentru dispozitivele mobile, acesta va fi ascuns deloc.
Pro-urile acestei abordări:- Mai întâi, simplitate. Nu este nevoie să instalați biblioteci și cadre suplimentare. Numai o modificare minimală a codului HTML este necesară.
- În al doilea rând, universalitatea. Site-ul vechi poate fi ușor adaptat, fără a rupe compatibilitatea înapoi.
- În al treilea rând, această metodă este mai corectă din punct de vedere semantic decât, de exemplu, aceeași bootstrap. Blocarea mapării este descrisă în CSS, nu în HTML.
nemiro a cerut. că codul poate fi simplificat prin adăugarea clasei "src" numai la eticheta html și efectuarea de mici modificări ale scriptului:
În CSS, trebuie să setați proprietățile ca ".scr-sm .my_block".
Articole similare
Trimiteți-le prietenilor: