很多人会对响应式布局和自适应式布局产生混淆,确实他们的原理是非常相似的,都是检测设备,根据不同的设备采用不同的css。
至于他们的区别,有个很简单的方法:同一个页面在不同尺寸的屏幕上访问时,看网址是否一样,只有一个网址为响应式,有多个不同的网址为自适应。另外的区分点是:是否需要一对一的设计界面,是则为自适应。中企动力小编举例如下:
2.自适应与响应式选择用哪个?
如果页面功能不多,用户交互少,不需要经常升级,响应式设计从运营的难易和维护的便利性考虑会更好,只要搞定网页端,其他的也都搞定了。如果从页面个性化多功能方面考虑,自适应设计更合适,因为这样可以更好地为用户提供功能全面,体验更好的界面。例如功能复杂、用户交互频繁的网站、电商类网站,用户量较大的网站选择自适应更合适。
3.做响应式页面的条件是什么?
响应式可以响应的前提有两点:
页面布局具有规律性,必须建立灵活的网格基础,元素宽高可用百分比代替固定数值;
网页图片必须是可伸缩的(页面中图片不固定宽/高)。
这两点也是栅格系统本身的典型特点,所以利用栅格系统进行响应式的设计是顺理成章的,也比较高效快捷,所以响应式与栅格化天生一对好搭档。
网格是创建一个设计精良网站的关键。在《秩序之美-网页中的网格设计》一书中,他解释成功设计的目的是「在混沌中创造秩序」。现在比较流行的8点栅格,就是结合基准网格(8pt)和纵向栅格进行设计的。
4.使用8点栅格进行设计的价值是什么?
对于设计师:提升效率、减少决策,同时让元素之间保持一种协调的节奏。
对于团队:设计师和前端工程师之间更容易达成默契,前端可以较轻松地用肉眼丈量8的倍数。
对于用户:同一品牌的产品保持高质量的一致性体验,并且在自己的设备上也不会出现模糊的半像素偏移。
5.常见的动态布局方式有哪些?
A:包括固定布局、流体布局、混合布局、响应式布局。