用了这么多年的响应式(responsive)，居然一直都是迷迷糊糊的。但不懂又不是不能用，又不是不能完成需求， 倒也平平安安相安无事。
简单的说就是使用一套前端代码，能够在不同的设备正常显示，不至于出现内容溢出，文本覆盖，布局混乱等现象，导致页面无法正常使用。响应式页面能够根据屏幕的大小自动的调整布局，内容，使其能给用户提供一个合理的阅读体验。
简单地说就是在手机，电脑，平板等众多设备中都能够正常显示，符合预期的设计。
而 我们常用的设备根据屏幕尺寸从小到大可以分为手机(phone),平板(tablet),便携式 移动设备（laotop）和桌面级设备(desktop)
根据上述定义，如果我们拿了台设备出来， 我们说他是平板（tablet）那么他一定不会是laptop或者desktop， 之间是非此即彼的关系。
但是将现实世界映射到计算机世界后：
按照bootstrap给屏幕的分类
xs ,sm, md, lg, xl, xxl分成了六个区间
这样的设计倒是很合理，涵盖了所有的设备。后面的一些前端框架基本上也照着这个路子在定义响应式。
10年前大概还提一个碎片化的概念（就是市场了出了大大小小不同的屏幕，导致很严重的适配问题，如果一一适配的话 工作量极大，当时还延申了安卓和ios之争），因为响应式，这个问题很大程度上已经缓解了。
但是在响应式设计这里
我们先来看mediaQuery语句：
只要屏幕大于 576 就是table
大于798 就是laptop
大于1200就是 desktop
所以一个结论就是 如果他是table 那么他不单纯是tablet，有可能是 laptop，也有可能是desktop。
画张图可以是这样的：
图1
但我们的理解不该是这样的吗？
图2
这样的定义虽然在写法上简化了，在现代的GRID的布局上也不用依次指定每种屏幕占用的大小了。
比如我们指定了md的size那么即使指定 lg，xxl的尺寸也可以使用md的尺寸。
但是每次使用的时候都觉得拧巴，总觉得哪儿怪怪的，虽然每次都能照着教程给设置出来，感觉起来并不放心的样子。但这并不影响使用，迷迷糊糊的不也照样活得好好的么
并且一旦想深入定制，还是有些力不从心的感觉，甚至会放弃掉成熟的框架提供的能力，自己去重新封装一套
也一直没有细想这个问题，总是满足需求就行。 今天偶然间的在使用时想到这个问题， 回头一看源码，还真是恍然大悟。
接受了一个设备既可以使平板又可以是便携式屏幕还可以是桌面级设备的事实后，以后面对响应式设计可能会更加得心应手一些把。
这个世界总是在进化，总是能够把本身简单的东西封装成你我看不懂的样子….
用了这么多年的响应式(responsive)，居然一直都是迷迷糊糊的。但不懂又不是不能用，又不是不能完成需求， 倒也平平安安相安无事。
简单的说就是使用一套前端代码，能够在不同的设备正常显示，不至于出现内容溢出，文本覆盖，布局混乱等现象，导致页面无法正常使用。响应式页面能够根据屏幕的大小自动的调整布局，内容，使其能给用户提供一个合理的阅读体验。
简单地说就是在手机，电脑，平板等众多设备中都能够正常显示，符合预期的设计。
而 我们常用的设备根据屏幕尺寸从小到大可以分为手机(phone),平板(tablet),便携式 移动设备（laotop）和桌面级设备(desktop)
根据上述定义，如果我们拿了台设备出来， 我们说他是平板（tablet）那么他一定不会是laptop或者desktop， 之间是非此即彼的关系。
但是将现实世界映射到计算机世界后：
按照bootstrap给屏幕的分类
xs ,sm, md, lg, xl, xxl分成了六个区间
这样的设计倒是很合理，涵盖了所有的设备。后面的一些前端框架基本上也照着这个路子在定义响应式。
10年前大概还提一个碎片化的概念（就是市场了出了大大小小不同的屏幕，导致很严重的适配问题，如果一一适配的话 工作量极大，当时还延申了安卓和ios之争），因为响应式，这个问题很大程度上已经缓解了。
但是在响应式设计这里
我们先来看mediaQuery语句：
只要屏幕大于 576 就是table
大于798 就是laptop
大于1200就是 desktop
所以一个结论就是 如果他是table 那么他不单纯是tablet，有可能是 laptop，也有可能是desktop。
画张图可以是这样的：
图1
但我们的理解不该是这样的吗？
图2
这样的定义虽然在写法上简化了，在现代的GRID的布局上也不用依次指定每种屏幕占用的大小了。
比如我们指定了md的size那么即使指定 lg，xxl的尺寸也可以使用md的尺寸。
但是每次使用的时候都觉得拧巴，总觉得哪儿怪怪的，虽然每次都能照着教程给设置出来，感觉起来并不放心的样子。但这并不影响使用，迷迷糊糊的不也照样活得好好的么
并且一旦想深入定制，还是有些力不从心的感觉，甚至会放弃掉成熟的框架提供的能力，自己去重新封装一套
也一直没有细想这个问题，总是满足需求就行。 今天偶然间的在使用时想到这个问题， 回头一看源码，还真是恍然大悟。
接受了一个设备既可以使平板又可以是便携式屏幕还可以是桌面级设备的事实后，以后面对响应式设计可能会更加得心应手一些把。
这个世界总是在进化，总是能够把本身简单的东西封装成你我看不懂的样子….