Paano Gamitin ang Responsive Mode

Isinulat ni

sa

Paano Gamitin ang Responsive Mode

Mula sa bersyon 4.0, maaari ka nang magpalipat-lipat sa mga view ng desktop, tablet, at mobile phone habang nag-e-edit! Tinatawag namin itong responsive mode. Sa responsive mode, magbabago ang laki ng iyong site sa mas maliit na sukat upang gayahin kung ano ang magiging hitsura ng iyong site sa mas maliliit na screen.

Limitadong Kakayahan sa Pag-edit

Habang tinitingnan ang iyong site sa mga view ng tablet o mobile phone, magkakaroon ka ng limitadong kakayahan sa pag-edit. Dahil dito, maaari mo LAMANG gawin ang mga sumusunod:

  • Mag-edit ng teksto
  • Mag-format ng mga estilo ng teksto gamit ang text formatting toolbar
  • I-adjust ang ilang margin ng mga elemento at row *
  • Itago ang mga row sa mga tablet o mobile phone

* Naglalapat ang PBS ng ilang responsive na styling sa iyong mga elemento at row, kaya ang ilang margin ay hindi maaayos.

Narito ang ilang bagay na hindi mo maaaring gawin:

  • Magdagdag, mag-alis, o mag-drag ng mga elemento
  • Tingnan ang mga property ng elemento
  • Baguhin ang laki ng mga larawan, icon, row, at iba pang elemento na nababago ang laki

Pag-aadjust ng mga Margin para sa Partikular na Sukat ng Screen

Kung tinitingnan mo ang iyong site sa mga view ng tablet o mobile phone, anumang pagsasaayos ng margin na gagawin mo ay mailalapat lamang sa kasalukuyang view at sa mas maliit na view. Nagbibigay-daan ito sa iyo na i-tweak ang iyong mga disenyo upang maging mas maganda ang hitsura ng mga ito sa mas maliliit na screen, hiwalay sa buong bersyon ng desktop.

Narito ang isang halimbawa upang gawing mas malinaw ang mga bagay.

  1. Kung titingnan mo ang iyong site sa tablet mode, at ia-adjust ang mga margin ng isang heading, ang pagsasaayos na iyon ay tanging malalapat sa mga tablet screen. Malalapat din ito sa mga mobile phone screen. Kung babalik ka sa desktop mode, maibabalik ang orihinal na margin.
  2. Ngayon, kung pupunta ka sa mobile phone mode at higit pang ia-adjust muli ang parehong margin, ang pagsasaayos na iyon ay malalapat lamang sa mga screen ng mobile phone. Pagkatapos noon, magkakaroon ka ng ibang margin para sa mga desktop, tablet, o mobile phone.

Nalalapat lamang ito sa mga pagsasaayos sa mga margin, ang mga pagbabago sa teksto o mga pagbabago sa estilo ng teksto ay nalalapat sa lahat ng laki ng screen.

Pagtatago ng Nilalaman sa mga Sukat ng Tablet o Mobile Phone

Kapag tumitingin sa mga view ng tablet o mobile phone, magkakaroon ang iyong mga row ng bagong “eye” toolbar button na lalabas kapag itinapat mo ang cursor sa ibabaw ng mga ito. Ang pag-click dito ay magbibigay-daan sa iyo na ipakita/itago ang row para sa kasalukuyang sukat ng screen.

Magiging medyo transparent ang mga nakatagong row kapag nag-e-edit upang isaad na itatago ang mga ito kapag tapos ka nang mag-edit.

Tandaan na available lang ang feature na ito para sa mga row.