什么是响应式布局?(什么是响应式布局这种布局方式有什么特点)
在过去,网站通常就是为了电脑大屏幕展示而设计,如果用手机访问,只能在巴掌大的屏幕里看缩小版的页面。虽然还有手机专供的 WAP 页面,但因为太简陋也无济于事。
随着智能手机、3G、4G、HTML5 的普及,使用手机访问网站的人越来越多,为了让用户在手机上看到更合适的布局,且兼顾开发的效率,响应式的概念就被提出了。
通俗解释,就是通过一套代码,可以无缝匹配符合电脑、平板、手机预览效果的前端技术。
△ 响应式和自适应的区别
响应式布局:容器大小随窗口大小而变化。
自适应布局:容器大小不随窗口大小而变化,边距随窗口大小而变化。
响应式布局优势
调研中我们发现,国外几个内容网站,YouTube、Spotify、Netflix 和Behance,都使用了「内容墙」的设计方式,以突出内容的丰富度。
由于这种设计通常会保持容器之间的间距不变,这就需要容器大小变化以适应窗口大小变化了。响应式的布局思路,很好地帮助完成内容墙的设计。
在以往的开发合作中,设计提供切图和尺寸标注给开发就行了。
而响应式页面中的容器大小是动态的,我们可以提供一个表格,告诉开发在不同的页面宽度区间,对应的布局应该是怎么样的。这些区间的临界点,就是「断点」。
响应式这个概念虽然高大上,但并不是任何项目都要无脑往上套的。因为框架规则上的限制,导致我们很难在响应式页面中使用一些特别复杂、高级的视觉样式,导致最终呈现的效果往往非常简单或者过度依赖图片的质量。
所以,如果在功能较为复杂或需要复杂视觉支撑的网页中,就可以选择应用固定页面内容宽度的设计来完成。