feat: I want to adapt to mobile devices by using @media

[xiaoxuwei12345]

Affected Packages

• [ ] @yeger/eslint-config
• [x] @yeger/vue-masonry-wall
• [x] @yeger/vue2-masonry-wall
• [ ] vecti

Description

I want to adapt to mobile devices by using @media to change ssr-columns and max-columns. Does MasonryWall support this operation? @media (max-width: 768px) { //to change ssr-columns and max-columns }

Thank you!

Additional context

No response

Preferences

• [ ] I want to be assigned to and work on this issue myself

[DerYeger]

This use case is not supported due to the layout being created via JavaScript. However, you can use a ResizeObserver to dynamically change maxColumns.

[xiaoxuwei12345]

Thank you very much for your reply! Do you mean to use the window.matchMedia method? But in the following nuxt3 code, when I use the window.matchMedia method, when the number of items is 90, it takes about 10 seconds to change from two columns to three columns. Is there something wrong with my code? Please give me more advice, thank you very much!

const ssrColumns = ref(2); const maxColumns = ref(2);

const updateColumns = () => { if (window.matchMedia('(max-width: 768px)').matches) { ssrColumns.value =2; maxColumns.value =2; } else { ssrColumns.value =3; maxColumns.value =3; } };

onMounted(async () => { if (process.client) { updateColumns();

    window.addEventListener('resize', updateColumns);
}

});

onUnmounted(() => { if (process.client) { window.removeEventListener('resize', updateColumns); } });

MasonryWall :items="items" :ssr-columns="ssrColumns" :max-columns="maxColumns" :column-width="128" :gap="20"