什么是响应式网站?响应式网站的优缺点

什么是响应式网站？

 

　　响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。

 

　　页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSSmediaquery的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
 

 

响应式图片：

 

　　响应式图片技术思想：不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。这个技术的实现需要使用几个相关文件，我们可以在Github上获取。包括一个JavaScript文件(rwd-images.js)，一个.htaccess文件，以及一些范例资源文件。大致的原理是，rwd-images.js会检测当前设备的屏幕分辨率，如果是大屏幕设备，则向页面head部分中添加BASE标记，并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径"/rwd-router"。当这些请求到达服务器端，.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的"响应式图片"，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。

 

　　响应式网站的设计理念：

 

　　断点的选择（width、min-width、max-width）：

 

　　小屏幕设备：小于等于480px;

 

　　中等屏幕设备：481~800px；

 

　　大屏幕设备：800~1400px；

 

　　巨屏幕：1400+px；

 

响应式网站的优点：

 

　　1、减少工作量，网站设计的代码只需要设计和编写一份就好，多出来的工作量就是js脚本的修改和css文件的对于屏幕的适配代码

 

　　2、节省时间

 

　　3、每个设计都能得到正确的设计，网站是面向未来的。了可扩展性强

 

　　4、搜索优化

 

　　5、能够满足更多的系统功能

 

响应式网站的缺点：

 

　　1、用户体验不能再优化

 

　　2、会加载更多的样式表和脚本文件

 

　　3、对于来版本的浏览器是不兼容的

 

　　4、难以精确定位和控制