静态、流式、响应式、自适应、H5网页的特点和区别

静态、流式、响应式、自适应、H5网页的特点和区别，今天上海网站建设公司木辰小编就跟大家分享一下。

一、静态布局

(Static Layout)传统的web设计，对于PC设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分;

对于移动设备，单独设计一个布局，使用不同的域名如wap.或m.

意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置;

二、流式网站

流式布局(Liquid)的特点(也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。

也就是说你看到的页面元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示

三、响应式网站

响应式设计可以一个网站兼容多个不同终端，方便快捷的解决多设备显示适应问题。响应式的网站在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式。根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度。

优势

1、流体网格的网站适合响应式网页设计

2、灵活性强，可以适应不同分辨率的设备

每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变

可以把

四、自适应式网站

自适应只是响应式的一个子集，指网页中整体大图的自适应或者banner的自适应。

特点：分别为不同的屏幕分辨率定义布局，布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。

设计优势：固定断点的网站适合自适应网页设计

1、实施起来代价更低，测试更容易

2、自适应布局可以让设计更加可控，因为它只需要考虑几种状态就可以了

就是说你看到的页面，里面元素的位置会变化而大小不会变化

可以把自适应布局看作是静态布局的一个系列

响应式/自适应网页设计：

响应式/自适应网页设计会带来兼容各种设备工作量大、代码累赘、加载时间长的缺点，但它们能“一次设计，普遍适用”，可以根据屏幕分辨率自适应以及自动缩放图片、自动调整布局，它们不只是技术的实现，更多的是对于设计的全新思维模式

五、H5网站

HTML5和H5相同吗?

不同：HTML全称HyperTextMarkupLanguage(“超级文本标记语言“)

成为了网页标记语言的行业规范，它是构成网页的一种标记编写语言，现在的html5的这套规范可以标记视频、声效、甚至可以画画而不需要flash插件的支持，这是现在H5网页有着如此丰富特效的基础。而H5.正如之前所说，更偏向于营销媒介。

H5的最显著的优势在于跨平台性，用H5搭建的站点与应用可以兼容PC端与移动端、Windows与Linux、安卓与IOS。它可以轻易地移植到各种不同的开放平台、应用平台上，打破各自为政的局面。使用H5响应式布局，相同的网址就能实现不同终端联通，方便用户分享和企业宣传，维护成本也大大降低，为企业节省了人力物力。

开发者无需太多的适配工作，用户无需下载，打开一个网址即可，就能访问了。开发简单，开发成本低，入门门槛低，周期短，给小团队更多的机会。并且维护更新简单，无需用户更新客户端，只在网站更新即可。推广成本降低，推广的只是一个URL链接，二维码，不需要几十兆，几百兆的安装包去推广。传播效果好，h5页面最大的优势是传播能力极强，有非常好的传播效果，是企业商家做品牌曝光，产品宣传的利器。

H5主要缺点集中在性能上：同样的交互，用H5实现需要更多的系统资源，也可能会不够流畅。同时，应用还需要集成一个非常巨大的浏览器内核。

营销性的H5多指H5广告

范指那些在移动端中传播的带有特效、互动体验声效的Web网页，H5广告有着较好的视觉效果和交互体验，更加丰富精彩。

如果您有上海网站建设、网站改版、网站设计、网站制作的需求，可以咨询本周客服或者400电话咨询，享受更多的网站建设方案。