1、大图平铺自适应
这是一种给用户感受最强烈的大背景全屏视觉，整个视觉主打一张完整图片，交互和文字信息较为简单。图片尺寸根据屏宽大小自适应，交互菜单和文字信息通常默认系统字体通过大小变换和位移进行屏宽自适应。
对于大图平铺自适应，图片质量是关键，它将影响着整体的视觉质量。其次，是内容与图片的协调，尽量让它们不会互相干扰，处理方式一般分为两个类型，一个是对背景的处理，一个是对文字的处理。背景方面，会配合文字所处的位置进行局部模糊，纹理色彩弱化、单色化等处理。文字方面有时会选择覆盖底色，或半透明底色等方式进行突出，拉开与背景的视觉差距。
图片质量高，文字选择随字形的方形块面填充突出信息，表现干脆利落。图片尺寸随背景大小自适应，文字使用系统默认字体。在自适应的过程中便于定位和程序操控。
2、中心定位，两侧自适应
将主要内容和视觉居中安放在1200的尺寸以内，左右两侧安放次要的菜单按钮或辅助信息，让它根据屏幕的宽度自适应，这个方法要注意的是，一是不要将核心内容安放两侧，以免被忽视。二延展区域尽量减少干扰或在延展收缩过程中产生信息重叠。
中心定位是一种假全屏的视觉效果，适合于文字信息较少的视觉型页，而这部分的视觉并不使用全画幅的照片或插画，而是通过一定的排烈组合形成的主视觉。主画面集中在1000以内，左右带一定的延展性。整体不切糕，形成视觉上的假全屏。上下信息主要以导航、LOGO等内容为主，通过欣赏下面几张网页，我们看看有什么讨巧的办法实现假全屏的视觉效果。
这个页面蓝色的大背景与橙色的小点缀搭配，色彩鲜丽。中心向四周的太阳型的视觉，使我们感受到了视觉的延伸。这是一种讨巧的假全屏的方法，上下两侧的信息是按最大画幅定位的，整体页面开阔，自适应舒展性自然。两侧的切换按钮是让中心视觉延伸为假全屏的好办法。
3、单侧定位，中心延展
主要的信息内容居一侧对齐（左侧或右侧都可以，中国人一般习惯从左阅读所以我们通常选择左侧为主侧），次要的辅助视觉居另外一侧。文字信息选择系统默认字体，并根据屏幕自适应。为视觉内容留有一定的空间达到装饰效果。
单侧定位，适合于资料较多的全屏页。在单侧定位的1000宽度内首要保证文字信息的呈现，其次是配合的视觉图片。视觉图可以使用延展型，这样保证整个画面不切糕。
左对齐的设计如杂志一般的具有节奏感，轮播位置撑开了最大画幅，并动过向右的轮播滚动条浏览超过当前显示器宽度的信息。我们可以看到在单侧定位的全屏设计中，内容信息永远是需要首要保证在最小画幅内呈现的，图片和背景只是以辅助的形式以自适应的方式存在。
4、小切糕全屏响应式
小切糕响应行业俗称瀑布流设计，是根据屏幕宽度进行计算，通常在设计时会有一个基础最小切糕，然后以2倍、3倍、4倍的方式进行拓展，并计算出最合适完整的组合。通常用在图片信息的展示页面。1200以外是更上流的空间，不要在过去的潜规则中无法自拔，不要让经验画地为牢，开垦新良田吧！看看——硬件已迈步视觉怎好原地滞留。我们将其分为四大类进行赏析，包括大图平铺自适应，中心定位两侧自适应、单侧定位中心延展、小切糕全屏自适应。
这边展示了宽屏和窄屏页面的不同呈现效果。方块较完美的由上至下填满画面空间.
比例不同的切糕正如不同款式的衣服，让我们在上传图片是有更多的选择。整体的样式也显得更加动态轻松。
网站建设计最新案例赏析：
网站建设行业资讯推荐阅读：