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

一、响应式设计

页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方 面组成,包括弹性网格和布局、图片、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控制页面的布局),当宽度大于多少时怎么展示,小于多少时怎么展示,而且展示的方式向水流一样,一部分一部分的加载。视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。比如花瓣网、美丽说等,在商城网站应用较多。

三、固定

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

推荐阅读更多精彩内容