Anong mga pagbabago

Tandaan ang kakulangan ng <meta name="viewport" content="width=device-width, initial-scale=1">, na hindi pinapagana ang pag-zoom na aspeto ng mga site sa mga mobile device. Bilang karagdagan, ni-reset namin ang lapad ng aming container at binago namin ang navbar upang maiwasan ang pagbagsak, at sa pangkalahatan ay handa na.

Tungkol sa mga navbar

Bilang isang ulo, ang bahagi ng navbar ay medyo nakakalito dito dahil ang mga estilo para sa pagpapakita nito ay medyo partikular at detalyado. Mga override upang matiyak na ang pagpapakita ng mga istilo ng desktop ay hindi gumaganap o makinis gaya ng gusto ng isa. Magkaroon lamang ng kamalayan na maaaring may mga potensyal na gotcha habang nagtatayo ka sa ibabaw ng halimbawang ito kapag ginagamit ang navbar.

Mga browser, pag-scroll, at mga nakapirming elemento

Itinatampok ng mga hindi tumutugon na layout ang isang pangunahing disbentaha sa mga nakapirming elemento. Ang anumang nakapirming bahagi, tulad ng isang nakapirming navbar, ay hindi mai-scroll kapag ang viewport ay naging mas makitid kaysa sa nilalaman ng pahina. Sa madaling salita, dahil sa hindi tumutugon na lapad ng container na 970px at isang viewport na 800px, maaari mong itago ang 170px ng content.

Walang paraan sa paligid nito dahil ito ay default na pag-uugali ng browser. Ang tanging solusyon ay isang tumutugon na layout o paggamit ng hindi nakapirming elemento.

Non-responsive grid system

Isang-katlo
Isang-katlo
Isang-katlo