全国
我是雇主
我是服务商
接外包项目
主动投标,按项目金额成交赚钱
开店卖服务
封装服务,按服务定价售卖服务赚钱
成为云员工
成为兼职人员,上传案例和服务赚钱
更多经营模式
了解平台经营模式详情
APP
猪八戒APP
智能精准推荐 快速匹配人才
立即下载
八戒企业管家APP
管理企业资产 规避经营风险
立即下载
猪八戒小程序
扫一扫,无需下载体验更轻盈
八戒企业管家小程序
扫码即用 企业智能服务专家
猪八戒微信公众号
随时掌握一手资讯
打开微信“扫一扫”,打开网页后点击屏幕右上角“分享”按钮
首页 资讯 正文

网页布局设计方式有哪几种

作者 猪八戒网 12-23 15:48:01 阅读 14893

对于前端开发工程师来说,对于网页设计中,进行相应的布局,其布置的方式多种多样,对于不同的情况有不同的处理方法,但是很多设计师并不了解这些情况,接下来,小编带领大家了解网页布局设计五种方式。

一、静态布局

在传统的网页设计中,网页上所有元素的大小都是px。

1. 布局特征

无论浏览器的确切大小如何,页面的布局始终与第一次编写代码时相同。常规的PC站点是静态布局的,具有最小宽度,因此,如果宽度小于此值,则显示滚动条,如果宽度大于此值,则显示内容居中和背景。这种设计在PC上很常见。

2. 设计方法

PC:中心布局,所有样式使用绝对宽度/高度(px),设计一个布局,在屏幕的宽度和高度已经调整,使用水平和垂直滚动条检查覆盖部分;

移动设备:建立一个单独的移动网站,设计一个单独的布局,并使用一个不同的域名,如wap。或者m。

优点:这种布局对设计师和CSS作者来说都是最简单的,并且没有兼容性问题。

缺点:很明显你不能改变用户的屏幕尺寸。目前,大多数门户网站、大多数企业PC广告网站都采用了这种布局。固定像素大小的web页面是匹配固定像素大小的显示的最简单方法。然而,这种方法不是一种完全兼容的方式来创建未来的web页面。我们需要一些方法来适应未知的设备。

二、流式布局

液体版面(也称为“流体”)的特点是页面元素的宽度根据屏幕分辨率进行调整,但总体版面不变。代表性围栏系统(网格系统)。

例如,将主网页正文的宽度设置为80%,最小宽度设置为960px。图像也被类似地处理(宽度:100%,最大宽度通常设置为图像本身的大小,以防止由于拉伸而失真)。

1.布局特征

当屏幕分辨率改变时,页面中元素的大小会改变,但布局不会改变。[如果屏幕太大或太小,这会导致元素显示不正确。

2.设计方法

宽度由百分比定义,高度主要由px确定。它可以根据视区和父元素的实时大小进行调整,以尽可能适应各种分辨率。为了避免对读数的影响过大或过小,我们经常使用max width/min width等属性来控制大小流范围。

在Web前端开发的早期历史中,这种布局方法被用于处理不同大小的PC屏幕(当时屏幕大小差异不会太大)。如今的手机开发也是一种常见的布局方式,但缺点是显而易见的:主要问题是如果屏幕尺寸跨度过大,就无法在屏幕上正常显示,与原来的设计相比,屏幕太小或太大。因为宽度是由百分比来定义的,但是高度和文本大小大多是由Px来确定的,大屏幕手机下的显示效果会变成一些页面元素的宽度拉得很长,但是高度和文本大小与原来一样(也就是说,这些东西不能“流化”),而且显示很不一致

三、自适应布局

自适应布局的特点是为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以在不同的静态部分之间切换(页面元素的位置改变),但在每个静态布局中,页面元素不会随着窗口大小的调整而改变。自适应布局可以看作是一系列静态布局。

1.布局特征

当屏幕分辨率改变时,页面中元素的位置将改变,但大小不会改变。

2.设计方法

使用@media media query为不同大小和介质的设备切换不同的样式。在良好的响应范围设计下,可以给自适应范围内的设备提供最佳的体验,实际布局固定在同一设备下。

四、响应式布局

随着CSS3媒体查询技术的出现,以及响应式设计的概念。响应式设计的目标是保证一个页面在CSS作者的所有终端(PC、手机、手表、冰箱web浏览器等)上都能显示出满意的结果,它的实现不局限于具体的方法,而是通常与流媒体布局+弹性布局相结合,再与媒体查询技术结合使用。--同时,在每种版式中,都应用了流式版式的概念,即页面元素的宽度随着窗口的调整而自动调整。也就是说,创建与屏幕分辨率范围相对应的多个流体布局。反应式布局可以看作是流程布局和自适应布局设计的结合。

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

1.布局特征

在每个屏幕分辨率下都有一个布局样式,即元素的位置和大小会发生变化。

2.设计方法

媒体查询+流媒体布局。一般来说,@media query和grid system用于与布局的相对布局单位进行协调。实际上,通过CSS将不同的样式返回到单个web页面的不同设备上,是上述技术(如集成响应和流)的统称。

优点:适用于PC机和移动终端。如果足够耐心,效果是完美的。

缺点:(1)媒体查询有限,即只能枚举,只能适应主流的宽度和高度。(2) 要匹配足够的屏幕大小,工作量不小,而且设计还需要多个版本。

此代码将添加到响应页的页眉:

五、弹性布局

1. REM / EM的区别:REM与HTML元素的字体大小有关,而EM与其父元素有关。

2. 使用EM或REM单元进行相对布局比% %更灵活,并且可以支持浏览器字体大小调整和缩放的正常显示,因为EM是相对父元素的原因没有得到提升。[在制作网页时,中国网站习惯于使用CSS来定义字体大小,以确保每个人都能看到相同的效果。包括网易和搜狐在内的大多数网站都使用绝对像素单位。然而,如果你考虑网站的可用性,字体大小应该是可变的。一些视力不好的人需要放大字体才能清楚地看到页面内容。然而,ie主导了大部分浏览器市场,无法调整PX的字体大小。外国人非常重视网站的易用性,相当多的国外网站都使用了em作为字体单元。

3.这种类型的布局特点是使用EM /快速眼动的每个元素的大小单位包装的文字,虽然比例或PX作为主要分区大小的单位面积的页面(此句为“流布局”或“静态/固定布局”)。在这种情况下,早期的浏览器不支持扩展整个页面,只支持页面内的文本大小。使用EM / REM作为单元,您可以在文本缩放时生成包围文本的元素。

4. 浏览器的默认字体高度一般为16px,即1em: 16px,但1:16的比例计算不方便。为了使单位EM / REM更直观,CSS作者经常将页面和节点的字体大小设置为62.5%。例如,在选择使用REM来控制字体时,首先需要设置根节点HTML的字体大小,因为浏览器的默认字体大小是16px * 62.5% = 10px。这样1rem = 10px,便于计算。

5. 使用EM / REM来定义大小的另一个优点是,它可以更好地适应字体单元的缩进/填充或在margin / browser中设置字体大小的情况(因为EM / REM会随着字体大小的变化而同步变化)。例如:P {text缩进:2em;}。

6. 使用快速眼动单元的灵活布局在移动端也很流行。

7. 事实上,在移动端使用所谓的弹性布局是相当勉强的。移动弹性布局之所以流行,是因为REM单元更适合调整页面中每个元素的大小(根据屏幕大小)和文本的大小。事实上,使用VW、VH等新兴单元可以实现完美的流量布局(高度和文字大小都可以是“流量”),不再需要弹性布局。

今天,小编给大家详细介绍了在开发过程中使用的网页布局设计五种方法,特别是自适应和响应式布局。这两者没有什么不同。你需要在不同的情况下做出不同的解决方案,这也是你成为一名成熟的前端开发工程师最重要的技能。

(5)
网页布局设计