xt/blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

enhance:向响应式样式框架加入一些更新。

Browse Source
This commit is contained in:
徐涛 2021-06-30 15:54:02 +08:00
parent 482a1047e9
commit 80690fd8fb
1 changed files with 19 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
source/_posts/responsive-flex.md
View File

@ -87,13 +87,32 @@ keywords: CSS,Less,响应式,responsive,flex,media
each(@basis-percent, .(@max) { each(@basis-percent, .(@max) {
each(range(1, @max), .(@i) { each(range(1, @max), .(@i) {
.b-@{i}-@{max}-@{media} { .b-@{i}-@{max}-@{media} {
# 如果应用在Lesscss 4中，这里需要改成：percentage((@i / @max))，
# 因为Lesscss 4在数据计算上有了比较大的修改。
flex-basis: percentage(@i / @max); flex-basis: percentage(@i / @max);
} }
.w-@{i}-@{max}-@{media} { .w-@{i}-@{max}-@{media} {
width: percentage(@i / @max); width: percentage(@i / @max);
} }
.wmax-@{i}-@{max}-@{media} {
max-width: percentage(@i / @max);
}
.wmin-@{i}-@{max}-@{media} {
min-width: percentage(@i / @max);
}
}); });
}); });
each(range(0, 100), .(@i) {
.w-@{i}p-@{media} {
width: percentage(@i / @max);
}
.wmax-@{i}p-@{media} {
max-width: percentage(@i / @max);
}
.wmin-@{i}p-@{media} {
min-width: percentage(@i / @max);
}
};
@wrap-modes: { @wrap-modes: {
none: nowrap; none: nowrap;
wrap: wrap; wrap: wrap;