开发笔记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进行自适应

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,827评论 1 45
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,475评论 0 7
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 7,362评论 0 17
  • 第一章 HTML5 (2014年10月29日发布)新特性: 10个 (1)新的语义标签 (2)增强型表单 (3)视...
    fastwe阅读 1,033评论 0 1
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,955评论 0 0

友情链接更多精彩内容