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

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

作者: janey_默 | 来源:发表于2017-07-13 17:16 被阅读0次

一、响应式设计

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

三、固定

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

相关文章

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

    一、响应式设计 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整...

  • 静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区

    推荐:如下文章 静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

  • 四种常见网页布局

    常见的网页布局主要有四种:1.自适应;2.响应式;3.静态;4.流式。刚刚接触网页设计的时候,常常分不清响应式布局...

  • 自适应网页设计(Responsive Web Design)

    什么是自适应? 前端工程师的必备技能如何在不同大小设备上呈现同样的网页。 自适应和响应式的区别 响应式布局 就是一...

  • 响应式网页

    响应式网页 响应式网页可以根据设备的不同,以及特性的不同,而自动改变布局、大小等。 响应式网页的特征:1)流式网格...

  • 第十七章 响应式与H5一些新标签

    一,响应式 什么是响应式?响应式和自适应又有什么区别呢? 就是在各个网页显示不同的效果:一个网站可以兼容多个终端,...

  • 响应式布局

    自适应和响应式的区别 自适应布局(Adaptive):解决了如何才能在不同大小的设备上呈现同样的网页,内容不随窗口...

  • 响应式网页设计

    名词解释 1.什么是响应式网页设计 响应式网页设计或称自适应网页设计、回应式网页设计、对应式网页设计。 是一种网页...

  • 响应式开发

    响应式网页(Responsive)与自适应(Adaptive)网页: 相同点:为了网页能够兼容不同的终端(分辨率)...

  • 白话分析自适应跟响应式的区别

    根据日常开发经验及网上相关资料,用简单通俗易懂的大白话分析自适应跟响应式的区别。注:本文只分析自适应跟响应式的区别...

网友评论

      本文标题:响应式、自适应、流式、固定网页的区别

      本文链接:https://www.haomeiwen.com/subject/lgtghxtx.html