Open lewenweijia opened 4 years ago
前端布局发展史 表格布局(table) -> 定位(position) -> 浮动布局(float) -> 弹性盒布局(flex) -> 栅格布局(grid) 混杂定位 + 浮动, 弹性+弹性, 弹性+定位, 栅格+弹性, 栅格+定位
表格布局(table) -> 定位(position) -> 浮动布局(float) -> 弹性盒布局(flex) -> 栅格布局(grid)
定位 + 浮动
弹性+弹性
弹性+定位
栅格+弹性
栅格+定位
布局的发展动力?:
vw? 解决rem需要在css基础上借助js进行辅助的缺点
css3中的n都是以1作为起始值, 也就是css不是作为变成语言, 而是更多的作为描述语言
最便捷的垂直居中
.container { display: flex; } .item { margin: auto }
资源 iCSS CSS-Inspiration 前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配 陈慧晶老师在 2019 第五届 CSS 大会上的分享 -- 新时代CSS布局 H5必知必会之与App交互 H5必知必会之像素级还原设计稿
词汇 vmin/vmax: 取宽高最小/最大的那一个
vmin/vmax
工具 evrone/postcss-px-to-viewport
前端布局发展史
表格布局(table) -> 定位(position) -> 浮动布局(float) -> 弹性盒布局(flex) -> 栅格布局(grid)
混杂定位 + 浮动
,弹性+弹性
,弹性+定位
,栅格+弹性
,栅格+定位
布局的发展动力?:
vw? 解决rem需要在css基础上借助js进行辅助的缺点
css3中的n都是以1作为起始值, 也就是css不是作为变成语言, 而是更多的作为描述语言