继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

移动端系列(适配)

largeQ
关注TA
已关注
手记 960
粉丝 92
获赞 585
像素比
  • 点、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('<meta name="viewport" content="width=device-width, initial-scale=' + ratio + ',maximum-scale=' +
ratio + ',minimum-scale=' + ratio + '">')
设置rem,根据屏幕大小自动调整适合该屏幕的像素
let $html = document.querySelector("html")

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



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


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP