移动端适配与rem方案(个人理解).pptx

移动端适配与rem方案 ——安子晗 移动端屏幕尺寸与像素那些事 分辨率 像素：左边有很多红蓝绿组成的小块，每一个小块就是一个像素，一个像素需要rgb三种颜色不同亮度的配合才能显示成其他颜色。 平常所说的屏幕分辨率就是在这块屏幕上有多少个像素。比如厂商常说的1080*1920，就是横向有1080个像素，纵向有1920个像素。 什么是PPI 如何计算PPI 乔布斯说：PPI超过326就叫做视网膜屏幕 逻辑像素和物理像素 屏幕的像素分为逻辑像素（设备独立像素） 和物理像素（设备像素） 物理像素：硬件上屏幕上横向和纵向有多少 个像素点。 逻辑像素：程序认为屏幕上横向和纵向有多 少个像素点。 设备像素比(device pixel ratio )： 设备像素比（dpr） = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向 JavaScript 中的window.devicePixelRatio来获取 设备中的像素比值。 举个栗子？ 以iPhone6为例： iPhone6的设备像素是375×667 这个可以认为是iPhone6的逻辑像素， iPhone6是2倍屏 那根据 dpr 公式可以知道iPhone6的物理 像素是：750×1334 普通屏幕 vs Retina屏幕 普通屏幕的物理像素点： Retina屏幕的物理像素点： 在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈现的大小(物理尺寸)是一致的， 不同的是1个css像素所对应的物理像素个数是不一致的。 在普通屏幕下，1个css像素 对应 1个物理像素(1:1)。 在retina 屏幕下，1个css像素对应 4个物理像素(1:4)。 为什么要有@2X、@3X的图片 原因：理论上，1个位 图像素对应于1个物理 像素，图片才能得到完 美清晰的展示。 为了更方便理解... 首先，设备像素也就是物理像素是保持不变的，逻辑像素是可以伸缩的。来看三个图： 一个物理像素对应 一个逻辑像素对应 一个物理像素对应 一个逻辑像素 多个物理像素（放大） 多个逻辑像素（缩小） 那，再回去看上一个PPT： 一倍屏就是第一张图的情况，刚好对应上； 二倍屏和三倍屏就是第二张图的情况，一个逻辑像素对应多个物理像素。 Viewport（视口） 通俗的讲，移动设备上的viewport就是设备的 屏幕上能用来显示我们的网页的那一块区域， 再具体一点，就是浏览器上(也可能是一个app 中的webview)用来显示网页的那部分区域。 对于viewport，国外的PPK大神有很深的见解， 他把viewport分成了三种： layout viewport visual viewport ideal viewport layout viewport 首先，移动设备上的浏览器认为自己必须 能让所有的网站都正常显示，即使是那些 不是为移动设备设计的网站。但如果以浏 览器的可视区域作为viewport的话，因为移 动设备的屏幕都不是很宽，所以那些为桌 面浏览器设计的网站放到移动设备上显示 时，必然会因为移动设备的viewport太窄， 而挤作一团，甚至布局什么的都会乱掉。 如果把移动设备上浏览器的可视区域设为 viewport的话，某些网站就会因为viewport 太窄而显示错乱，所以这些浏览器就决定 默认情况下把viewport设为一个较宽的值， 比如980px，这样的话即使是那些为桌面设 计的网站也能在移动浏览器上正常显示了。 ppk把这个浏览器默认的viewport叫 做 layout viewport。 visual viewport layout viewport 的宽度是大于浏览器可视 区域的宽度的，所以我们还需要一个 viewport来代表 浏览器可视区域的大小， ppk把这个viewport叫做 visual viewport。 layout viewport的宽度获取： document.documentEleme