ITPub博客

首页 > IT职业 > IT生活 > 移动端系列(适配)

移动端系列(适配)

IT生活 作者:wghdd 时间:2021-09-09 09:51:55 0 删除 编辑
像素比
  • 点、points (抽象单位 )

  • 像素渲染     (栅格化)

  • 物理像素     (调整大小)

  • dpi、ppi

  • 获取像素比    (window.devicePixelRatio)

详细请参考:
http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

视口
  • width 设备宽度 [pixel_value | device-width]

  • user-scalable 是否允许缩放 (no||yes)

  • initial-scale 初始比例

  • minimum-scale 允许缩放的最小比例

  • maximum-scale 允许缩放的最大比例

  • target-densitydpi (以淘汰)

设置1:1像素比
  • 随着科技的日新月异,屏幕的物理像素越来越高,导致像素和物理像素比从原来的1:1到现在的1:X,而这种情况会导致前端布局因为在不同物理像素比的情况下产生不同的问题,所以通过JS动态控制统一将所有的像素比还原成1:1

let  ratio = 1 / window.devicePixelRatiodocument.write('')
设置rem,根据屏幕大小自动调整适合该屏幕的像素
let $html = document.querySelector("html")

//获取文档宽度let pageWidth = $html.getBoundingClientRect().width$html.style.fontSize = pageWidth / 16 + 'px'  //不一定是除以16,除以多少你自己喜欢



作者:饥人谷_米弥轮
链接:https://www.jianshu.com/p/fbc1933c3c9d


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/1775/viewspace-2813652/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-04-15

  • 博文量
    109
  • 访问量
    864