页面布局总结笔记
date
Dec 28, 2019
slug
page-layout-design
status
Published
tags
HTML&CSS
summary
根据业务代码总结出的页面布局设计、编写最佳实践
type
Post
写页面和样式是基础，如何更快更好的完成确实需要总结与思考。简单总结下：
- 拿到图先分析整体结构
- 是否要做响应式，确定响应式的结构
- 确定页面字体、行高等（大标题/标题/小标题/正文）
- 确定整体的空隙：模块与模块之间的空隙、图片与文字的空隙
- 提取pc/m结构相同的部分尽量复用
- 对响应式的字体与间隙做等比缩小
- 确定container的宽度，如果有大背景色就div+div.container的结构
- 图片上带字的结构需要确认是直接裁剪还是写成html因为在响应式下位置会多变