一、背景平铺内容居中

最常见的大图平铺自适应，图片质量是关键，它将影响着整体视觉质量。其次，是内容与图片的协调，尽量让它们不会互相影响干扰，解决方式一般分为两个类型：一个是对背景的处理，会配合文字所处在的位置进行局部的模糊、纹理色彩弱化、单色化等处理。另一个是对文字的处理，文字方面有时会选择覆盖底色，或者半透明底色等方式进行突出，拉开与背景的视觉差距。两个类型的处理方式多是为了凸显主题内容。


                                    （图片来源于网络）
 
 
二、内容居中背景延展全屏

内容居中背景延展是一种假全屏的视觉效果，适合于文字信息较少的视觉型页面，而这部分的视觉并不使用全画幅的照片或插画，而是通过一定的排版合成形成的主视觉。主画面集中在1200像素以内，左右带一定的延展性。整体不切糕，形成视觉上的假全屏。上下信息主要以导航、LOGO等内容为主。


                                    （图片来源于网络）
 
 
三、内容居左，右侧延展

内容居左，适合于资料较多的全屏网页。在单侧定位的1200像素宽度内首先要保证文字信息的呈现，其次是要配合视觉图片。视觉图可以使用延展型，可以保证整个画面不切糕。左对齐的设计一般多具有很强的节奏感，轮播位置撑开了最大画幅，并通过向右的轮播滚动条浏览超过当前显示器宽度的信息。单侧定位的全屏设计中，内容信息永远是需要首先保证在最小画幅内呈现的，图片和背景只是以辅助的形式自适应的形式存在。为了让内容信息更清晰，背景时常退而求其次，采用单色或模糊弱化。


                                    （图片来源于网络）
 
 
四、全屏比例等分响应式

全屏响应式设计适合以小图展示为主的信息或图文信息。信息之间的关系属于并列的、信息量级接近的、信息数量较多的，小切糕的方式可以支持实时更新的动态数据。切糕图片的大小有其规律，它们通常有一个单位面积，并以通常一倍、两被、四被这样的方式进行拓展，这样在形式结构上可以更加完美无缺。当宽屏和窄屏显示器浏览的时候内容会自动适应显示器完美的上至下有序的排列。


                                    （图片来源于网络）

作者：优加网络杨开友