Appearance
区块方案
方案
区块设计约定:
各个区块宽高各异,但它们使用了相似的背景图。
背景图的上方标题栏比较华丽,左部分和右部分都有专门的线条设计,中部是简单设计,以便于适应不同的区块宽度。
背景图的中部只在最左和最右有竖线。
背景图的下方要么是简单的横线,要么是也有复杂的线条设计。
错误实践:
其他程序员的通常做法是为各个区块各自切图,各自设置背景图,思路虽然简单,但是是偷懒的错误实践,因为相似的背景图没有复用,而且宽高比例无法调整,无法自适应,一旦改版就要重新设计、重新切图。
最佳实践:
只用一张背景图就实现宽高自适应。
将区块划分为
header
、middle
、footer
三个行,每个行又分成left
、center
、right
三个单元格。middle
的高度设弹性高度,center
的宽度设弹性宽度,以保证自适应。左上角单元格设置背景图的左上角部分,右上角单元格设置背景图的右上角部分,中上部单元格设置背景图的中上部部分,其他以此类推。
范例
请用浏览器的开发工具选择内部元素,查看元素位置和宽高。
WARNING
红色边框是为了标明区块边界,不是区块本身效果。
准备背景图
只需要从设计图的各个区块里面选择最宽最高的那张背景图即可。
事实上,这张背景图必须既要最宽,又要最高,否则某些较大区块的.middle
和center
的背景图会出问题。如果并没有符合要求的背景图,就只能让设计师专门做一张既最宽、又最高的背景图。
HTML 骨架
利用<el-row></el-row>
和<el-col></el-col>
作为外层容器,内部可以使用通用组件。组件的 HTML 骨架如下:
html
<el-col>
<div class="section-container">
<div class="header">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="middle">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="footer">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</div>
</el-col>
样式
代码中.middle
的单元格和.footer
的单元格样式有重叠,但是我没有合并,因为如果.footer
的图案复杂的话,还是需要拆开写。
几个变量的值的来源:
$header-height
:能容纳.header
的华丽线条,且方便后续开发的一个值。$header-left-width
:能容纳.header
左侧华丽线条的最小宽度值。$header-right-width
:能容纳.header
右侧华丽线条的最小宽度值。$padding-x
:区块内容区域距离区块边界的距离,注意视觉舒服且方便后续开发的一个值。$footer-height
:能容纳.footer
华丽线条,且方便后续开发的一个值。
scss
.section-container {
display: flex;
flex-direction: column;
// 行
> div {
display: flex;
// 单元格
> div {
background-image: url(../image/bigscreen-section-bg.png);
// 每行居左的单元格
&.left {
background-position-x: left;
}
// 每行居右的单元格
&.right {
background-position-x: right;
}
// 每行中间的单元格弹性宽度
&.center {
flex: 1;
}
}
}
$header-height: 30px;
$header-left-width: 330px;
$header-right-width: 70px;
$padding-x: 10px;
$footer-height: 15px;
> .header {
height: #{$header-height};
> div {
background-position-y: top;
}
.left {
width: #{$header-left-width};
}
.center {
background-position-x: #{$header-left-width};
}
.right {
width: #{$header-right-width};
}
}
> .middle {
flex: 1;
> div {
// 这里是负值
background-position-y: #{-$header-height};
}
.left {
width: #{$padding-x};
}
.center {
// 这里是负值
background-position-x: #{-$padding-x};
}
.right {
width: #{$padding-x};
}
}
> .footer {
height: #{$footer-height};
> div {
background-position-y: bottom;
}
.left {
width: #{$padding-x};
}
.center {
// 这里是负值
background-position-x: #{-$padding-x};
}
.right {
width: #{$padding-x};
}
}
}