Figma 新增响应式设计功能 breakpoint

来源:eidea编辑:xie浏览量:446
作为完美主义者,网页设计中我们通常会设计多套适配方案来解决不同屏幕下的视觉体验。

bootstrap作为知名响应式框架,也有对浏览器不同宽度的展示设计网格,我们可以看到。

当网页宽度小于750px时,它会呈现出,适用于手机屏幕尺寸的视觉效果。

当网页宽度大于750px小于1024px时,它会呈现出,适用于小移动设备,例如iPad,或者笔记本电脑上的视觉效果。

当网页宽度大于1366px时,它会呈现出,适用于大显示器屏幕尺寸的视觉效果。

当然还有专门为4k显示器设计的视觉效果。

可以针对不同布局进行相关的视觉设定。非常方便。




进行响应式网页设计时,我们通常会限制浏览器宽度来控制现实内容的效果,官方给出的尺寸如下:400-500-800-1000px,当然可以根据不同的团队进行调整。使用bootstrap的宽度为576-768-992-1200px。


通常境况下我们会根据不同的网页进行宽度的设计然后逐一展示,figma只需要轻松设置,即可将效果直接通过浏览器宽度调整现实出来。

如果你需要进行响应式网页设计,这个工具你值得尝试。

响应式案例欣赏

墨尘建筑事务所

响应式企业官网建设

古色服饰

知名品牌响应式企业官网

东融盛世

H5自适应企业官网