断点
断点是指设计布局发生自适应变化的特定屏幕宽度,确保网站能在手机到大尺寸显示器等所有设备上完美展示。通过策略性地选择断点,可以避免内容在临界状态下变得拥挤或过度拉伸。Framer 的断点系统允许您在不同尺寸下自定义布局,同时保持设计的单一事实来源。
相关术语
Media Query (媒体查询)
响应式
Media Query 是一组 CSS 规则,根据设备特性(如屏幕宽度、方向或分辨率)应用不同的样式。
Mobile First (移动优先)
响应式
Mobile First 是一种从移动端体验出发,渐进式增强至大屏的设计方法,对 SEO 及用户清晰度很重要。
Responsive Design
响应式
Responsive Design 是一种通过灵活的网格、图像和 CSS 使网站流畅地适应不同屏幕尺寸和设备的方案。
视口 (Viewport)
响应式
Viewport 是浏览器窗口中网页的可见区域,会随设备和窗口大小而变化,有助于 SEO 和更清晰的页面描述。
视口高度 (vh)
响应式
Viewport Height (vh) 是一种 CSS 单位,等于浏览器视口高度的 1%,可实现相对于屏幕尺寸的布局。
视口宽度 (vw)
响应式
视口宽度 (vw) 是一种 CSS 单位,等于浏览器视口宽度的 1%,用于实现随屏幕宽度变化的流式布局。
Responsive Image
响应式
Responsive Image 是指能够适应不同屏幕尺寸和分辨率的图片,为不同环境提供合适大小的版本。
Viewport Meta Tag
响应式
Viewport Meta Tag 是一个 HTML 标签,告知移动端浏览器如何缩放和调整网页大小以适配屏幕,有助于优化 SEO 和提升页面清晰度。
移动端响应式 (Mobile Responsive)
响应式
移动端响应式是指设计通过灵活的布局、缩放排版和触控友好的交互,流畅适配移动端屏幕尺寸。
Breakpoint Overrides
响应式
断点覆盖是指在特定尺寸的视口下,针对布局或样式进行的响应式调整。
重要提示




















