Mai ka manawa o ka hoʻolālā pūnaewele pane maʻalahi, ua noi nā mea hoʻomohala e pili ana i ka hiki ke hoʻolālā i nā mea DOM e pili ana i kā lākou nui maoli a ʻaʻole i ka nui o ka viewport i ka polokalamu kele pūnaewele (me ke kōkua o nā nīnau media ). ʻO ka ʻoiaʻiʻo, ʻo nā nīnau nīnau container ( nā nīnau mua nā mea mua) ʻo ia paha ka hana CSS i noi nui ʻole ʻia e nā mea ʻimi pūnaewele.
Ua nui a lehulehu , nā 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.
Nā 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
ʻO ka hoʻohana ʻana o nā nīnau nīnau ipu pono kūpono no nā mea i nā overlay, popup, sidebars a i ʻole nā mea maʻamau - ʻoiai i kēia manawa, e laʻa me ka script ma luna.