首页小程序开◥发正文

名词解︼释网站推广自←适应布局（网站功能设计名词解释）

小程序ㄨ开发 2023-01-22T22:46:09 1240

今天给各位分享╱名词解释网站推广自适应》布局的︻知识，其中也会对网站功能设计名词解释进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！本文目录一览： 1、「布局」静态布局、自适应布局、流式布局、响应式『布局、弹◢性布局简析

今天给各位分享名词解释网站推广自适应布局∩的知识，其中也会对网站功能设计名词解释进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

「布局」静态布局、自适应布局、流式布局、响应式布局、弹性布局简析

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

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

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

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

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

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

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

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

至于display:flex;相关知识，我就◢不赘述了，推荐阮一峰的博客

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

名词解释网站推广自适应布局（网站功能设计名词解释）

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

响应式与⌒自适应的原理是相似的，都是』检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比ζ的，而不是固定的宽度。

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

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

流式就是采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展◣示，而且展示的方式向水流▅一样，一部分一部↘分的加载。

静态的就是采用固定宽度的了。

静态网页设计制作中的布局模式

一、静态布局（Static Layout）

即传统Web设计，网页上的所有元※素的尺寸一律使用px作为单位。

1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最』初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设≡置了min-width，这样的话，如果小于这个宽度∞就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。

2、设计方法：

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

移动设备：另外建立移动网站，单独设计一个布¤局，使用不同→的域名如wap.或m.。

在移动★端开发中采用静态布局的两种方式：

（1）在viewport meta标签上设置width=320，页面∑的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面↓等比缩放，从而「刚好占满整个屏幕。（见→前端开发-web app 变革之rem）

（2）设在viewport meta标签上设置content"width=640,user-scalable=no，页面的各个♀元素也采用px作为单位。由于640px超出了手机宽度，浏览器Ψ会自动缩小页面至刚好全屏。

优点：这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问㊣　题。

缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。

二、流式布局（Liquid Layout）

流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度〗按照屏幕分辨率进行适配调整，但整体∑　布局不变。代表作栅栏系统（网格系统）。

网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置网页主体的●宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的【尺寸，防止被拉伸而失真）。

1、布局特点：屏幕分辨率变╲化时，页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或「者太小都会导致元素︾无法正常显示】

2、设计方法：使用%百分比定义宽ξ　度，高度大都是¤用px来固定住，可以根据可视№区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适〓应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

这种布♀局方式在Web前端开发◣的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺︽寸的差异不会太大），在当今的移动☉端开发也是常用布局方式，但缺点明☆显：主要的问题是如果屏幕尺度跨■度太大，那么在相对其原始设计而言过小或过大的屏幕上不〖能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕ω的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小※还是和原来一样（即，这※些东西无法变得“流式”），显示非常不协调。

三、自适应布局（Adaptive Layout）

自适应布局的特点是分别为不同的屏█幕分辨率定义布局，即创建多∩个静态布局№，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发▓生改变），但在每个静态布局中，页⊙面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的卐一个系列。

1、布局特点：屏幕分辨率变♀化时，页面里面元素的位置会变化而大小不会变化。

2、设计方法：使用 @media 媒体卐查询给不同尺寸和介质的设备▅切⌒　换不同的样式※。在优秀的响应范围设计下可以给适配范围内的设备最①好的体验，在同一个设备下实际还Ψ 是固定的布局。

四、响应式布局（Responsive Layout）

随着CSS3出现了媒体查询技术，又出现了响应式设计的概念。响应式设计的目标是确保一个页面在所有终↑端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示★出令人满意的效果，对CSS编写∑者而言，在实现上不拘泥于♀具体手法，但通常是糅合了流式布局+弹性布局，再搭配媒』体查询技术使用。——分别为不同的屏∮幕分辨率定义布局，同时，在每个布局中，应用流式△布局的理念，即页面元素宽□度随着窗口调整而自动适配。即：创建多※个流体式布局，分别对应一个屏幕分辨率范围。可以把响应〖式布局看作是流式布局和自适应布局设※计理念的融合㊣　。

响应式几乎已经成为优秀页面布局的标准。

1、布局特点：每个屏幕分辨率下面会有一个布局样式，即元素∑　位置和大小都会变。

2、设计方法：媒体查询+流式布局。通常使用 @media 媒体查询和网格系统 (Grid System) 配合相︾对布局单位进行布局，实际上就是综合响应ζ　式、流动等█上述技术通过 CSS 给单一网页〗不同设备返回不同样式的技术统『称。