厦门UI培训
达内厦门UI培训中心

15268258619

热门课程

网页有哪几种布局?

  • 时间:2018-03-28 09:28
  • 发布:转载
  • 来源:网络

今天小编和大家来聊聊网页的布局方式,希望对刚入门的小伙伴有所帮助。


静态布局(Static Layout)

即传统Web设计(2004年左右开始使用,2012年左右基本很少使用),对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;

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

自适应布局(Adaptive Layout)

自适应布局(Adaptive)的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变,但在每个布局中,页面元素不随窗口大小的调整发生变化(注意,这是自适应与流式、响应式的较大差别!!)

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


流式布局(Liquid Layout)

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

响应式布局(Responsive Layout)

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

可以把响应式布局看作是流式布局和自适应布局设计理念的融合。


PX:像素(pixel)

Px是相对长度单位,它是相对于显示器屏幕分辨率而言

优缺点:比较稳定和精确,但在浏览器中放大或缩小时会出现页面混乱

EM:相对长度单位

EM是相对与父元素来设计字体大小的,如果当前行内文本字体尺寸未被人为设置,则相对于浏览器默认尺寸 (默认情况下1em=16px)

REM:CSS3新增的相对单位

相对于HTML根元素

它既可以做到只修改根元素就成比例的调整所有字体大小,又避免字体大小逐层复合的连锁反应,现在除了IE8或更早版本的浏览器外,所有浏览器都支持rem

PC端固定宽度页面适合使用PX,自适应页面适合用EM

移动端页面适合使用REM

上一篇:大牛设计作品出类拔萃的秘诀是什么?
下一篇:转行学习游戏开发需要参加培训班吗?

如何判断UI培训机构是否优秀?

解析:为什么选择从事UI设计工作?

UI培训需要多久?UI设计需要掌握哪些技能呢?

如何成为自我驱动型的用户体验设计师?

选择城市和中心
贵州省

广西省

海南省