近期在做web后台页面设计，之前的设计稿均是基于1920x1080分辨率设计的，但是实际用户很多是使用1280分辨率的电脑和笔记本，而之前的设计稿直接运用的话，在小屏会有滚动条，需要针对小屏进行适配。
之前对响应式设计和栅格属于一知半解，此次详细了解了一下，填了几个之前认识不足的误区，也感觉栅格和响应式设计并不是万能的。
一、响应式的目的
二、栅格的目的
三、仅web端的适配
一、响应式的目的
响应式是2010年推出，主要目的是为了满足PC — 平板 — 手机的适配，分辨率跨度较大。
响应式布局的三大核心：媒介查询——根据当前分辨率和可视区域判断所处区间；流式布局——在区间之间自动变换宽度；弹性图片——图片缩放保持不变形。
响应式的优点在于：方便改动，因为设计时都是基于一套的。
响应式的缺点在于1.需要同时加载多套CSS，影响加载速度。2.响应式最初的目的是从web端降到移动端并保证体验，换句话说，实际移动端的体验是类似web端的，完全比不上一开始就基于移动端设计的。
因此响应式在2015-2017年比较火爆，个人感觉最近几年开始减少(一个比较明显的趋势就是网上响应式相关的文章大多是17年左右的，近两年的文章大多是对以前文章的复制黏贴或者总结）。随着web端的衰弱和移动端的兴起，更多公司倾向于为APP端单独进行设计，给用户更好的体验。
二、栅格的目的
如果要做响应式，就需要基于栅格。但不做响应式的话，栅格不是必须的，而且栅格对于开发和设计是有区别的。
对开发者而言栅格是实现动态布局的手段，类似于百分比布局，实际需要提前沟通是否引入了bootstrap等。iview和ant design均采用了bootstrap4的规范，栅格的断点是1600,1200，992等。栅格主要是针对盒子的，盒子里的内容并不强制栅格。
对设计师对于栅格的理解源自平面设计中的栅格，核心思想是比例。运用栅格的目的是得到一种统一性和韵律性的美感，另一方面也有依据，更容易规范化。但是设计时往往基于某一分辨率，不容易兼顾多种分辨率。而运用栅格后，虽然盒子的比例固定，但内容的比例可能会随着分辨率变化而失调，导致不美观。
因此一方面在具体落地中视角的不同就容易造成偏差，最终影响还原度，继而增加沟通成本，另一方面栅格更适合多列结构的组件化页面。设计时尽量多考虑开发的实际效果，并且局限于栅格束住了手脚。
三、仅web端的适配
数据来源：站酷uxboy
web端的适配有如下的发展历史：静态布局、流式布局+弹性布局、响应式布局。
静态布局：用px做单位，设立min-width。小于最小宽度时出现滚动条，大于宽度时内容居中加背景。
流式布局：宽度采用百分比，高度和文字采用px。比较常见的例子如qq邮箱，阿里云后台，百度控制台。
缺点是如果屏幕宽度跨度太大，那么大分辨率和小分辨率的样式可能会差得很多，1280分辨率显得偏拥挤而1920以上分辨率显得太空太散。
一种解决办法是其中某些内容的间距采用固定px而不是百分比。
弹性布局：采用em或者rem，这样高度和文字也会缩放。比较常见的比如腾讯视频，腾讯新闻。
采用@media查询分辨率，在1280，1440这两个断点切换font-size从而导致整个版面缩放。而在断点之间采用流式布局。
响应式布局：根据分辨率设置断点，在断点之间采用静态或流式布局。断点的切换可以变换font-size，也可以改变页面布局（比如4列变3列）。
结论：后台设计一般不考虑移动端适配，因此个人建议后台设计优先考虑流式布局。如果流式布局在1280和1920分辨率难以协调，则考虑响应式布局。在1440加入断点，改变布局或者缩小font-size。
网友评论