E hoʻohana i nā nīnau ipu i kēia lā

Mai ka hiki ʻana mai o ka hoʻolālā pūnaewele pane, ua noi nā mea hoʻomohala i ka hiki ke hoʻolālā i nā mea DOM ma muli o ko lākou nui maoli ma mua o ka nui o ka viewport o ka polokalamu kele pūnaewele (me ka hoʻohana ʻana i nā nīnau media ). ʻO ka ʻoiaʻiʻo, ʻo nā nīnau ipu (nā nīnau element mua) paha ka hiʻohiʻona CSS i noi nui ʻia e nele ana i nā polokalamu kele pūnaewele.


Ua nui a lehulehu , pou i wehewehe pono i ke kumu o ka paʻakikī o ka hoʻokō ʻana i nā nīnau container ma CSS a no ke aha e kānalua ai nā mea hana lako pūnaewele e hoʻokō iā lākou. Inā makemake ʻoe e ʻoliʻoli ia manawa, hiki i kahi JavaScript liʻiliʻi ke kōkua:

c51c33e1533e68c3f8fd24633700789f

Penei ke ʻano o ka mea holoʻokoʻa:

See the Pen by David Vielhuber (@vielhuber) on CodePen.

breakpoints, selector a me kaila aʻe hiki ke hoʻohana 'e hoakaka i ka likeʻole breakpoints, ka' akomi selector a me ke 'ano o nā papa i hoʻohuiʻia. Inā ʻoe e hoʻohana nei i ka script, hiki iā ʻoe ke kamaʻilio i nā papa hana hou e like me kēia:

c51c33e1533e68c3f8fd24633700789f

ʻOi aku ka maikaʻi o ka hoʻohana ʻana i nā nīnau ipu no nā mea i uhi ʻia, popups, sidebars a i ʻole nā ​​mea maʻamau - ʻoiai i kēia manawa, no ka laʻana, me ka palapala ma luna.

Hope