Mobile First
A design approach that starts with the mobile experience and progressively enhances for larger screens. Mobile-first forces prioritization and ensures the smallest screens get the best experience, not a squeezed afterthought. This approach often results in cleaner, more focused designs at all screen sizes.
Breakpoint
A specific screen width where your design adapts to a different layout, ensuring your site looks good on all devices from phones to large monitors. Strategic breakpoint choices prevent awkward in-between states where content becomes cramped or overly stretched. Framer's breakpoint system lets you customize layouts at each size while maintaining a single source of truth for your design.
Media Query
CSS rules that apply different styles based on device characteristics like screen width, orientation, or resolution. Media queries enable responsive design by adapting layouts at defined breakpoints. Framer handles media queries automatically based on your breakpoint configurations.
Responsive Design
An approach that makes websites adapt fluidly to different screen sizes and devices through flexible grids, images, and CSS. Responsive design ensures optimal experiences whether viewing on phones, tablets, or desktop monitors. Framer's breakpoint system enables precise control over layouts at each screen size.
Viewport
The visible area of a web page within the browser window, which varies by device and window size. Viewport dimensions determine breakpoint behavior and affect what's visible without scrolling. The viewport meta tag ensures proper scaling on mobile devices.