移动端部分(持续更新中)

1.dpr 移动端设备像素比

设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下,设备像素和CSS像素的比值

DPR = 设备像素 / CSS像素(某一方向上)

实际上,CSS对应的js属性是screen.width/height,DPR对应的是window.devicePixelRatio.
以iphone5为例,iphone5的CSS像素为320px*568px,DPR是2,所以其设备像素为640px*1136px.

2.meta标签的viewport属性

https://segmentfault.com/a/1190000009448193
多数移动应用将viewport设置为不可缩放来保证页面的显示

3.移动页面配适

大漠大大的博客:
https://www.w3cplus.com/css/vw-for-layout.html
这张图太棒了吧...

移动端部分(持续更新中)_第1张图片
各种页面高度

vw是基于viewport视窗的长度,这里的视窗(Viewport)指的就是浏览器可视化的区域,而这个可视区域是window.innerWidth/window.innerHeight
的大小

你可能感兴趣的:(移动端部分(持续更新中))