移动端适配和rem方案(个人理解).pptxVIP

移动端适配与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就是设备的屏幕上能用来显示我们的网页的那一块区域，再具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。对于viewport，国外的PPK大神有很深的见解，他把viewport分成了三种： layout viewport visual viewport ideal viewport Viewport（视口）layout viewport首先，移动设备上的浏览器认为自己必须能让所有的网站都正常显示，即使是那些不是为移动设备设计的网站。但如果以浏览器的可视区域作为viewport的话，因为移动设备的屏幕都不是很宽，所以那些为桌面浏览器设计的网站放到移动设备上显示时，必然会因为移动设备的viewport太窄，而挤作一团，甚至布局什么的都会乱掉。如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。ppk把这个浏览器默认的viewport叫做?layout viewport。visual viewportlayout viewport 的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表 浏览器可视区域的大小，ppk把这个viewport叫做 visual viewport。layout viewport的宽度获取：document.documentElement.clientWidth visual viewport的宽度获取：window.innerWidth ideal viewport因为现在越来越多的网站都会为移动设备进行单独的设计，所以必须还要有一个能完美适配移动设备的viewport。所谓的完美适配指的是，首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出