前端之响应式设计

╰+哭是因爲堅強的太久メ 2022-07-12 03:26 345阅读 0赞

一天到晚的听人吹什么响应式设计，具体问又支支吾吾，打不出个具体所以然来，今天我就大概讲一下响应式设计，顺便讲一下其它的几种设计的区别。  
现在前端存在着这么几个布局：  
1.静态布局（Static Layout）  
即传统Web设计，对于PC设计一个Layout，页面上的控件都是固定大小，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；  
对于移动设备，单独设计一个布局，使用不同的域名如wap.或m.。  
2.流式布局（Liquid Layout）  
流式布局（Liquid）的特点（也叫”Fluid”) 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。  
白话：页面元素用百分比设定，随着不同的分辨率或者不同浏览器显示不同  
3.自适应布局（Adaptive Layout）  
自适应布局（Adaptive）的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。  
你可以把自适应布局看作是静态布局的一个系列。  
通常是用到css hack;

Hack是基于开源的程序的基础，对其代码进行增加、删除或者修改、优化，使之在功能上符合新的需求。

css hack:我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。

4.响应式布局（Responsive Layout）  
分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。  
可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

之前想过：最开始其实想错了，自适应布局就是通过百分比布局，而响应式则是布局也大变样了；其实这是流式布局和响应式布局的区别；自适应并不是通过百分比来使各种浏览器适应的；而也是通过各种不同的css来布局的；

而且布局不一定局限到css上，因为不同浏览器所解释的不同，js有时候也得用不同的代码，这也叫自适应。  
主要理解清楚自适应布局和响应式布局的区别![这里写图片描述][SouthEast]  
从图中可以看出，响应式设计是一对多的方式，自适应设计是一对一的方式。换句话说，响应式设计用一套代码写出的网页适应多个设备，而自适应设计用一套代码写出的网页自适应一个设备，不同的设备需要单独定义。

自适应只是响应式的一个子集  
自适应：不改变布局  
响应式：布局随着页面大小不同而改变  
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验  
因为响应式布局可以改变布局，所以一行显示几个可以根据屏幕的大小单独确定，这就增强了用户体验；

那制作网站的时候“什么样的网站/项目适合使用自适应布局（固定断点）？什么样的网站适合响应式布局？（流体网格）”  
理论上来说，响应式布局在任何情况下都比自适应布局好一些，但在某些情况下自适应布局更切实际。  
自适应布局可以让你的设计更加可控，因为你只需要考虑了了几种状态就万事大吉了。但在响应式布局中你可能需要面对非常多状态——是的，大部分状态之间的区别很小，但它们又的确是不同的——这样一来就很难确切搞清你的设计会是什么样。同时这也带来了测试上的难题，你很难有绝对的把握预测到它会怎样。换个角度说，这也是响应式布局的魅力所在。通过允许表面上的不确定因素存在，你可以获得更高层次上的确定。虽然你无法在精确到像素级别准确预知你的设计如何在943px×684px视觉区域汇中展示，但你能确定的是它们一定能展示的很好——不管是表层特征还是布局结构都有条不紊。  
自适应布局有它自己的优势，因为它们实施起来代价更低，测试更容易，这往往让他们成为更切实际的解决方案。自适应布局可以看做响应式布局的“穷兄弟”，在资源有限的情况下就可以让它出马。特别是改进现有网站的时候尤其奏效，因为全部重写代码在这时并不可行。这种案例中，采用自适应布局是一个不错的出发点。  
其实无论是哪种设计理念都是各有优缺的，还是要从个人实际去求出发去选择！  
这次首先弄清楚了响应式的具体概念，以后对响应式也不再那么迷茫，以后有时间通过以下网址的参考讲一下响应式的具体实现；

响应式实现参考：  
[http://blog.csdn.net/zxl1033394132/article/details/50574382][http_blog.csdn.net_zxl1033394132_article_details_50574382]  
[https://www.zhihu.com/question/20976405][https_www.zhihu.com_question_20976405]  
[http://baike.baidu.com/link?url=3IXk1ItK6G0TEwxiuw3rF6Fgl5JKfqDN-l4afjRXsBuWl8IqlnYoketNXIbFIZwRa2LLPQBKThqicD8V8rcYoOBulcPHD5n-iJYtKJRTnWBC8o9Y4AXQYM0zNXUTQW5Xmhq-wWAfrLh7eAbedKO0q\_][http_baike.baidu.com_link_url_3IXk1ItK6G0TEwxiuw3rF6Fgl5JKfqDN-l4afjRXsBuWl8IqlnYoketNXIbFIZwRa2LLPQBKThqicD8V8rcYoOBulcPHD5n-iJYtKJRTnWBC8o9Y4AXQYM0zNXUTQW5Xmhq-wWAfrLh7eAbedKO0q]  
[http://caibaojian.com/356.html][http_caibaojian.com_356.html]  
[http://blog.csdn.net/kalision/article/details/22305393][http_blog.csdn.net_kalision_article_details_22305393]

[SouthEast]: /images/20220711/08e3723199864c9199c260a1dda421e3.png
[http_blog.csdn.net_zxl1033394132_article_details_50574382]: http://blog.csdn.net/zxl1033394132/article/details/50574382
[https_www.zhihu.com_question_20976405]: https://www.zhihu.com/question/20976405
[http_baike.baidu.com_link_url_3IXk1ItK6G0TEwxiuw3rF6Fgl5JKfqDN-l4afjRXsBuWl8IqlnYoketNXIbFIZwRa2LLPQBKThqicD8V8rcYoOBulcPHD5n-iJYtKJRTnWBC8o9Y4AXQYM0zNXUTQW5Xmhq-wWAfrLh7eAbedKO0q]: http://baike.baidu.com/link?url=3IXk1ItK6G0TEwxiuw3rF6Fgl5JKfqDN-l4afjRXsBuWl8IqlnYoketNXIbFIZwRa2LLPQBKThqicD8V8rcYoOBulcPHD5n-iJYtKJRTnWBC8o9Y4AXQYM0zNXUTQW5Xmhq-wWAfrLh7eAbedKO0q_
[http_caibaojian.com_356.html]: http://caibaojian.com/356.html
[http_blog.csdn.net_kalision_article_details_22305393]: http://blog.csdn.net/kalision/article/details/22305393