设计师们正在不断打破常规网格。从响应式网页设计 （Responsive Web Design简称RWD） 的早期开始，这就是一次伟大的演变。
5年前，响应只是意味着展示的内容不断的根据展示的内容进行相应的响应和调整。但它始终处于严格的网格范围之内。
实际上，响应式网页设计对设计师如何使用网格产生了负面影响，响应式Web设计的布局主要是液态的，这也正是设计者对设计样式不好控制的原因。
但是以后不会再这样了。
今天，随着技术的进步media queries（媒介查询）和 Flexbox（弹性布局，它是现代Web布局的主流方式之一）等技术给设计师提供了更多网格计算功能。设计师根据不同的情况具有不同的质量，这种方式应用在网页设计中的不同网格之中：
· 视差 - 当滚动鼠标时，重叠的内容通常会“浮动”在其覆盖的内容上。这个效果要超过应用于整个网站的卷动顶起视差效果。
· 不同深度的阴影 - 虽然设计师不经常应用这一点，但是根据物理光影属性，重叠元素起来的元素会有不同的阴影深度。
· UI标注 - 在此变体中，产品网站使用重叠图像标注一块UI元素。它对于简单的产品来说很完美 。
· 图文结合 - 通常，背景内容通常是一些图片来表达情绪，因为重叠大部分都是模糊的。
说这么多了，赶紧看看一些栗子🌰吧：
A little site called Squarespace
Design by Giga Tamarashvili
Paper Tiger
https://flayks.com/
https://flayks.com/
名词解释：
响应式网页设计（Responsive Web Design简称RWD）
这个术语，由伊桑•马科特（Ethan Marcotte）提出，是一种网页设计的技术做法。该设计应当根据设备环境(系统平台、屏幕尺寸)进行相应的响应和调整
关于Media Queries
到底什么是Media Queries ？ 一般我们在开发HTML + CSS 网页中，都会有一份CSS 来控制网页的样式表。 而随着各式各样不同大小、长宽与解析度的装置的兴起，我们在开发网页只考虑到自己的萤幕显示的如何，是多么的肤浅哪。 在开发者的屏幕看到的网页或许很漂亮，那其他人的萤幕呢？ 所以，我们需要的是能够控制不同大小的屏幕，在其所显示出来的样式，让各式各样来自不同地方的User 都能够有最佳的浏览体验。
Scrolljacking
通过重新定义鼠标滚动速度、幅度达到控制可视区域视觉效果的方式。
网友评论