开发笔记1-Web网页开发一些尺寸的计算

移动端h5视频高度百分百，视频水平居中的偏移量计算

1、前置已知数据：设W为设备屏幕的宽，H为设备屏幕的高，以及视频元数据的比例S，如16 : 9。
2、设w为视频元数据的宽，h为视频元数据的高，h=H时，S=16/9，在苹果x上W=1125px，H=2436px，求w和视频居中偏移量。

因为
  w/h=S=16/9
当h=H时，
  w/H=16/9
  w=16H/9
  w=16*2436/9≈4330px
因为
  w=4330px，W=1125px
所以
  偏移量l=(w-W)/2
  结果正负，具体看代码实现时的偏移方向

PS：适合设置父容器overflow为hidden，其下的video高度百分百的情况。

移动端h5背景图片自适应时，背景上互动元素的位置校准计算

1、前置已知数据：设W为设备屏幕的宽，H为设备屏幕的高
2、设在750x1334设计稿上，w1为背景图片的宽200px，h1为背景图片的高300px，w2为互动元素的宽，h2为互动元素的高，x2为互动元素的x轴坐标50px，y2为互动元素的y轴坐标250px。当在苹果x上W=1125px，H=2436，h1=H时，求互动元素在苹果x上的x轴坐标x3、y轴坐标y3。

因为
  h1=1334px，H=2436px
所以
  设计稿缩放比例r=H/h1=2436/1334=1218/667≈1.83
  x3=x2r=501.83=91.5px
  y3=y2r=2501.83=457.5px
  如果互动元素跟随背景同步缩放，结果还要对偏移量进行加减；如不同步，则可以直接使用em进行自适应