静态、自适应、流式、响应式四种网页布局有什么区别?

html-css010

静态、自适应、流式、响应式四种网页布局有什么区别?,第1张

1、灵活性不同:

静态布局:毫无灵活性可言,目前已逐渐被淘汰。

自适应布局:静态布局的升级版,因其强大的灵活性,已逐渐成为高端网页的代名词。

流式布局:灵活性更高,可适用于其他三种网站布局。

响应式布局:自适应布局的升级版,响应式网站要普遍适应市面上各类屏幕,开发难度和工作量都是非常大的,开发价格自然比普通网站高。

2、设计方法不同:

静态布局:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分。 

自适应布局:使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。

流式布局:使用百分比定义宽度,高度大都是用px来固定,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。

响应式布局:媒体查询+流式布局。使用@media媒体查询和网格系统配合相对布局单位进行布局,就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。

扩展资料:

静态、自适应、流式、响应式四种网页布局的特点概括

1、静态布局:即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。

2、流式布局:页面元素的宽度按照屏幕分辨率进行适配调整,但整体布局不变。这就导致如果屏幕太大或者太小都会导致元素无法正常显示。

3、自适应布局:分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。

4、响应式布局:分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。

不是一个概念咯。网页开发总是基于流式布局的,这是由浏览器及html规范限定的。基于网格的布局是应用程序开发时经常使用的布局方式。

流式布局:所有的元素总是默认的自动向左上角靠近,一般我们只会通过控制元素相对位置的方式使其达到预计的效果,即元素的位置依赖于相邻元素的位置和尺寸。

基于网格的布局:所有的元素可以放在窗体的任意位置,其位置一般是绝对定位的,元素之间的定位没有依赖性。

不知道这种解释是否明白,有用望采纳。

近期学习,有很多感想,有时候看似相近的概念,其实意义却不相同。所以学习要针对不同的名词有明确的区分意识。

抽空时间,打算学习下display:flex本以为就是一个小小的知识点,正式去研究的时候,才发现display:flex有很多内容,能实现很多效果。比如三栏布局(左右两栏固定,中间栏自适应),圣杯布局。

后来想着经常听到流式布局,自适应布局,响应式布局,他们有什么区别呢,就去搜了许多内容查看,才发现每种布局都有优缺点和不同使用场景。

静态布局 :给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容。针对不同分辨率的手机端,分别写不同的样式文件。

自适应布局 :创建多个静态布局,每个静态布局对应一个屏幕分辨率范围,使用 @media媒体查询 技术。

流式布局 :元素的宽高用 百分比 做单位,元素宽高按屏幕分辨率调整,布局不发生变化。屏幕尺度跨度过大的情况下,页面不能正常显示。

响应式布局 :采用自适应布局和流式布局的综合方式,为 不同屏幕分辨率范围 创建 流式布局

弹性布局 :要点在于使用 <tt>em和rem单位</tt> 来定义元素宽度,与流式布局有极大的相似性,但也有不同之处,主要区别在于弹性布局的尺寸主要根据字体大小而变化。

至于display:flex相关知识,我就不赘述了,推荐阮一峰的博客 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

具体选择哪种布局方式,要根据需求确定。