页面布局总结笔记

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

© i7eo 2017 - 2024