培训首页  >  网页设计师新闻  >  南通网页设计培训网页布局有几种方式
南通网页设计培训课程

南通网页设计培训网页布局有几种方式

来源:

科迅教育

    发表于:2021-12-31 16:18:23   20次浏览

南通网页设计培训网页布局有几种方式!常用的前端网页布局方式有四种,分别为静态布局;流式布局;自适应布局;响应式布局。其中静态布局为传统的一种布局方式,网页上的所有元素都是用px为单位进行设定的。

1、静态布局

为传统的一种布局方式,网页上的所有元素都是用px为单位进行设定的。

布局特点:不论屏幕的大小,页面宽高始终不变,始终维持初设计时的样式大小来显示。

常规的PC端网页都是用的静态布局,也就是设置了min-width,当小于这个宽度的时候出现滚动条,当大于的时候让内容居中,外加背景。

2、流式布局

布局特点:当屏幕分辨率大小发生变化时,页面里的元素大小会变化但布局不会发生变化。

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

往往配合max-width/min-width等属性控制尺寸流动范围以免过大或者过小影响阅读。

这种布局在web前端开发的早期,用来应对不同尺寸的PC屏幕,在当今的移动端开发也是常用的布局方式。

3、自适应布局

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

改变不同的屏幕分辨率可以切换不同的静态布局(页面元素位置发生改变),但在每个静态布局中 ,页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。

布局特点:当屏幕的大小发生变化时,页面里面的元素的位置会变化而大小不会变化。

设计方法:使用@media媒体查询给不同的尺寸和介质的设备切换不同样式。

在的响应范围设计下可以给适配范围内的设备比较好的体验,在同一个设备下实际上还是固定的布局。

4、响应式布局

响应式设计的目标是确保一个页面在所有终端上(各种尺寸的PC、手机、平板、智能手表的Web浏览器等等)都能显示出令人满意的效果,对CSS编写者来说,有多种手法可以去实现,但通常是糅合了流式布局+弹性布局,再搭配媒体查询技术使用。

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

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

以上是南通科迅教育培训机构,为你整理关于网页设计培训的相关介绍,如需了解更多的培训班、课程、价格、试听等信息,请您留下联系方式,我们课程顾问会尽快联系您,为您定制专属课程,开始您的学习之旅。

 


文中图片素材来源网络,如有侵权请联系删除
  • 平面设计师
  • UI设计师
  • 室内设计师
  • 动漫设计师
  • 服装设计师
  • 规划设计师
  • 零基础
  • 有PS基础
  • 有AI基础
  • 有CAD基础
  • 有PR/AE基础
  • 其他软件基础
  • 周末班
  • 全日制白班
  • 随到随学

热门课程

  • 南通UI设计网页设计培训

    电话咨询

    人气:2725

  • 南通室内设计培训班

    电话咨询

    人气:175

  • 南通UI设计师培训

    电话咨询

    人气:302

  • 南通UI设计培训

    电话咨询

    人气:440

  • 南通UI交互设计课程

    电话咨询

    人气:2867