页面布局

[lewenweijia]

前端布局发展史
表格布局(table) -> 定位(position) -> 浮动布局(float) -> 弹性盒布局(flex) -> 栅格布局(grid)
混杂定位 + 浮动, 弹性+弹性, 弹性+定位, 栅格+弹性, 栅格+定位

布局的发展动力?:

1. 前期可以很好满足, 发挥重要作用
2. 某时期开始无法很好地满足需求, 越来越潮流的方式

vw? 解决rem需要在css基础上借助js进行辅助的缺点

css3中的n都是以1作为起始值, 也就是css不是作为变成语言, 而是更多的作为描述语言

[lewenweijia]

最便捷的垂直居中

.container { display: flex; }
.item { margin: auto }

[lewenweijia]

资源
iCSS
CSS-Inspiration
前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配
陈慧晶老师在 2019 第五届 CSS 大会上的分享 -- 新时代CSS布局
H5必知必会之与App交互
H5必知必会之像素级还原设计稿

[lewenweijia]

词汇
vmin/vmax: 取宽高最小/最大的那一个

[lewenweijia]

工具
evrone/postcss-px-to-viewport