anguler 画面布局适应屏幕大小_前端自适应知识

产品自适应设计对于前端来说十分重要,优秀的前端自适应方案不仅可以将页面内信息有效传递,还可以使页面看起来更清晰美观.接下来就让小编带领大家认识一下4种常见的前端自适应方案.

01

百分比,rem单位制

使用百分比,rem作为单位赋予目标元素属性,那么元素大小和占位能够根据其祖先元素的大小进行调整.

如下图所示,第一组图中设置使用了固定值,并使用像素值作为单位,各模块相对位置出现较大形变.

第二张图中使用百分比作为单位,在此情况下各模块间相对位置变化较小.采用这种方案,可以相对方便的根据显示区域大小进行适应.

采用百分比,rem作为单位的优势:

• 符合工程师习惯:响应式

• 符合用户习惯:不易形变

02

弹性布局

display:flex是一种可以简洁且快速弹性布局的属性.使用该属性的容器具有水平和垂直的主轴和副轴,根据轴方向和空间排布来控制内部元素位置和形状.

如下图所示,右侧存放卡片的主容器就使用了弹性布局,将作为子元素的卡片可以根据容器的宽高和指定的排列方式自适应容器形状的变换.

采用弹性布局的优势:

• 自由度高,能适应多种多样的容器

• 父子元素均可设置相应属性,布局多样化能适应各种需求

• 元素间分隔清晰,符合用户对于识别性的需求

03

媒体查询

媒体查询可以针对不同类型的媒体定义不同的样式,也可以针对不同尺寸的显示区域设置不同的样式.@media 媒体类型 and (媒体特性)提供编程者更多样化的选择.

如下图所示,使用媒体查询,当右侧容器的宽度大小发生变化且越过某个设定好的阈值之后,就可以针对元素的特定属性(比如宽高)进行重新赋值,便于页面调整和用户阅览.

采用媒体查询的优势:

•  媒体查询能在不同条件下为元素设置不同的样式

•  媒体查询具有良好的适应性,能适应多种终端设备

04

栅格布局

讲到栅格布局就绕不开前端框架bootstrap,在此对这一布局模式作简要介绍.栅格布局类似表格,但与表格相比仍有较大区别.

栅格布局在多种屏幕设备中实现工作的类前缀(xs,sm,md,lg)是通过媒体查询Media Query实现的.bootstrap匹配当前显示区域的宽度选择最合适的column类型.列偏移是通过增加边距(margin)来实现的.比如使用.col-xs-offset-n类可使元素向右偏移n列宽度,本质上通过选择器为当前元素增加了左侧边距.

05

总结

相信各位读者也从前文的介绍中不难看出:每种自适应方案都有其适用程度和范围,因此在完成界面内容布局时,应该根据实际情况选择和应用.

我知道你“在看”呦