If you need to quickly lay out a responsive design in pxCode without having the layout shift or break across screen sizes, Responsive by Zoom is the right tool. It allows components to scale proportionally while keeping their layout intact.
One of the most common use cases is when you want to quickly finish a responsive layout without manually adjusting every breakpoint.
With Responsive by Zoom, you only need to configure one or two main breakpoints—such as Global or MD—and all other screen sizes will scale automatically based on the same ratio. This makes it fast and reliable to build consistent responsive layouts without worrying about layout shifts.
螢幕錄影 2025-04-09 下午3.16.44.mov
How to use the Responsive by Zoom feature in pxCode?
pxCode's Responsive by Zoom feature is a JavaScript-powered UI Library component designed to maintain fixed aspect ratios for elements. You can apply it directly, and your component will retain its original ratio across screen sizes.
Steps:
-
Finalize responsive layout and structure
Before applying the feature, make sure your layout and responsive settings are complete, especially for key breakpoints such as Global, MD, and 2XS. This ensures accurate scaling when the zoom behavior is applied.
-
Apply the UI Library
Right-click on the outermost block (usually root), select “Insert → UI Libraries” to open the UI Library menu. From the right panel, choose the HTML category, then click Responsive by Zoom from the list on the right.
-
Set widths for breakpoints
In the style panel, enter width values for the main breakpoints you configured earlier (e.g., Global, MD, 2XS). Other breakpoints will scale automatically based on the same ratio.
-
Preview and export
Switch to different device previews to verify that the layout scales proportionally and consistently. Once confirmed, click "Get Code" at the top right to export your code.