h5相关.

设计稿审查流程清单

• 确定设计稿的开发友好性（是否有还原成本高或无法还原的地方）
• 确定一些特殊的元素是否有合理的边界处理（如文案超出外层容器的边界怎么办）
• 确定页面的框架结构（Layout）
• 确定跨页面可复用的组件（Site Component）
• 确定当前页面可复用的组件（Page Component）

常见布局方式

浮动布局、绝对布局会脱离文档流

• 普通文档流布局
• 浮动布局(Float)
  • 一般在普通文档流上进行界面布局
  • 避免浮动布局遮盖普通布局 --> 清楚浮动
• 绝对布局(Absolute)
  • 定位参考祖先元素中的position为非static值的第一个元素
• 弹性布局 (Flex)
  • 该布局建立在flex-flow轴方向上
• 网格布局 (Grid)

解决兼容性问题步骤

• 确认触发的场景：什么浏览器，什么版本，什么情况下触发的问题，做到稳定复现。
• 找出问题原因：是什么问题导致的，具体表现如何？
• 确定解决办法：参考现成的解决方案，如哪些属性不能使用以及相应的 Hack 处理
• 收集兼容性处理方法，积累成文档

Media Queries

6个参数

当满足下面条件2时，@media规则下的样式被应用

• min-width：当视窗宽度大于或等于指定值时。与max-width相反
• min-height：当视窗高度大于或等于指定值时。与max-height相反
• orientation=portrait：当视窗宽度大于或等于高度时。与orientation=landscape相反

样式断点

• mobile 移动设备断点，视窗宽度 ≤ 768 px
• tablet 平板电脑设备断点，视窗宽度 ≥ 769 px
• desktop 桌面电脑断点，视窗宽度 ≥ 1024 px
• widescreen 宽屏电脑断点，视窗宽度 ≥ 1216 px
• fullhd 高清宽屏电脑断点，视窗宽度 ≥ 1408 px

针对 tablet 及以上的设备定制样式, 例子

@media (min-width: 769px) {
  /* tablet 及以上的设备，页面背景色设置为红色 */
  body {
    background-color: red;
  }
}

采用 transform 属性 scale 实现1物理像素线

css单位使用vw情况下, 1物理像素线（也就是普通屏幕下 1px ，高清屏幕下 0.5px 的情况）

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    -webkit-transform: scaleY(0.5);
    -webkit-transform-origin: 50% 0%;
}

补间动画

• transition属性实现的动画都属于补间动画
• animation属性除使用steps 和 frames以外的时间函数（如 ease、linear 或 cubic-bezier 等）的动画都属于补间动画。

杂记

• 桌面版chrome支持的字体大小默认不能小于12px
• animation-delay可设置成负值