响应式网站与自适应网站的区别以及设计原则

什么是响应式网站

响应式网站的概念是2010年5月由国外著名网页设计师Ethan Marcotte所提出的，其理念是页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。响应式网站的页面制作设计应根据设备环境(系统平台、屏幕尺寸)推进相应的响应和调整，也就是说响应式Web设计是一种技能，能够使网站适应于任何设备。即台式电脑、笔记本电脑、平板电脑、移动使用等不一样的设备所见到的内容是不一样的。 包含横向、纵向的屏幕。而针对响应式设计的背景则是由于客户对智能移动手机的青睐日渐升温，人们对移动手机端的客户体验要求也相应提升，那就必须有一个响应式的Web设计，以便能够从移动终端上很好地访问你的网站。

自适应网站与响应式网站的区别

自适应网站是使用不同设备浏览时呈现不同的网页，网页内容及版式风格或相似或完全不同，和PC端属于不同的网站模板，数据库内容或相同一致，或独立不同，目的在于为了符合访客的浏览。针对一些优化人员，更习惯于做到数据库同步，使PC端的网址和内容与移动端的网址和内容一一对应。

响应式网站是使用不同的设备浏览网站时，网站样式风格、内容和网址都是完全一样的，PC端和移动端属于同一个网站模板，数据库完全一致，也非常符合搜索引擎的优化规则。

为什么需要响应式web设计

由于目前移动设备的大批运用，以及PC表现器的尺寸逐渐显现较大差别，以前的的web页面已经不能满足多种设备的阅读效果，例如以前的页面在大阅读器中会有较大的空白区域，而在小阅读器已经移动设备中，不能完全表现页面，或是将页面缩小至适应移动设备尺寸大小，不能正常阅读，对于点击触点也有作用，很多人会选取放大页面，在推进阅读，这样整个页面就需要不停的拖动，给客户的体验很不好。

响应式网站是以后公司企业网站必然的成长发展方向，不论客户正在运用笔记本依然是iPad，我们的页面都应当满足自动切换分辨率、照片图片大小及相关联脚本功能等，以适应不一样设备；也就是说，页面应当有能力去自动响使用户的设备环境。响应式网页开发设计就是一个网站满足兼容多个终端而不是为每个终端做一个特定的版本。

响应式界面设计的基本原则

1、可伸缩的内容区块：内容区块的在一定程度上能够自动调整，以确保填满整个页面

2、可自由排布的内容区块：当页面尺寸变动较大时，能够减少/增加排布的列数

3、适应页面尺寸的边距：到页面尺寸发生更大变化时，区块的边距也应该变化

4、能够适应比例变化的图片：对于常见的宽度调整，图片在隐去两侧部分时，依旧保持美观可用

5、能够自动隐藏/部分显示的内容：如在电脑上显示的的大段描述文本，在手机上就只能少量显示或全部隐藏

6、能自动折叠的导航和菜单：展开还是收起，应该根据页面尺寸来判断

7、放弃使用像素作为尺寸单位：用dp尺寸等方法来确保页面在分辨率相差很大的设备上，看起来也能保持一致。同时也要求提供的图片应该比预想的更大，才能适应高分辨率的屏幕。