响应式、自适应、流式、固定网页的区别

一、响应式设计

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

1、响应式与自适应：

相同点：

原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比或者相对单位，而不是固定的宽度；

不同点：

响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式；

自适应不会，所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式

自适应是响应式的一个子集，是解决如何才能在不同大小的设备上呈现同样的网页。

一、响应式

1、允许网页宽度自动调整

1）设置meta标签，设置视图显示，设备的宽度（单位为缩放为100%时的CSS的像素），initial-scale页面初始缩放程度为1.0（target density分辨率的1:1来展现）、maximum-scale允许的最大缩放程度（指出页面大小与屏幕大小相比的最大乘数）、user-scalable用户是否能改变页面缩放程度（设置为yes则是允许用户对其进行改变，反之为no。）

(设置屏幕宽度为设备宽度，禁止用户手动调整缩放)

2）媒体查询（Media Query）设置断点（设定临界值）

/* CSS Code */

@media (min-width:最小值1) and (max-width:最大值1) {CSScontent;}

@media (min-width:最大值1 + 1) and (max-width:最大值2) {CSScontent;}

@media (min-width:最大值2 + 1) and (max-width:最大值3) {CSScontent;}

....

响应式网站运用到较多的CSS3和HTML5的属性和标签，可达到较为美观的视觉效果，但是

IE9以下的IE低版本不支持Media Query和html5，可使用cdn.bootcss.com提供的js插件，让低版本的浏览器支持html5标签和css3媒体查询功能。

一、自适应

可通过控制根节点HTML的font-size来控制整个文档的字体变化。

引用js控制html根节点的font-size的大小， 当页面变化的时候font-size相对应改变大小自适应屏幕。移动端用的比较多，主要是因为手机端的屏幕大小差异比较大，但屏幕都不是很大，但是要求网页在手机上面的表现形式差异不大，因此自适应在移动端

//这个是做响应式处理

$('html').css('fontSize', document.documentElement.clientWidth / 16);

$(window).resize(function() {

$('html').css('fontSize', document.documentElement.clientWidth / 16);

})

二、流式

采用了一些设置（适当的js控制页面的布局），当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载。视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。比如花瓣网、美丽说等，在商城网站应用较多。

三、固定

静态的就是采用固定宽度进行布局，传统的网页布局方式。