Implementing responsive web components with ResizeObserver

  1. Add an observer to this wrapper via ResizeObserver API
  2. Define breakpoints for the container width
  3. Add CSS classes to container according to current breakpoint, defined in the observer listener
  4. Apply styles to container children elements using child or descendant CSS selectors
  • Is easy to implement, both in vanilla JS/HTML and with UI frameworks
  • Works on every site
  • Has good performance

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store