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

移动端适配与rem方案——安子晗移动端屏幕尺寸与像素那些事分辨率•像素：左边有很多红蓝绿组成的小块，每一个小块就是一个像素，一个像素需要rgb三种颜色不同亮度的配合才能显示成其他颜色。•平常所说的屏幕分辨率就是在这块屏幕上有多少个像素。比如厂商常说的1080*1920，就是横向有1080个像素，纵向有1920个像素。什么是PPI如何计算PPI•乔布斯说：PPI超过326就叫做视网膜屏幕逻辑像素和物理像素•屏幕的像素分为逻辑像素（设备独立像素）和物理像素（设备像素）•物理像素：硬件上屏幕上横向和纵向有多少个像素点。•逻辑像素：程序认为屏幕上横向和纵向有多少个像素点。•设备像素比(devicepixelratio)：设备像素比（dpr）=物理像素/设备独立像素//在某一方向上，x方向或者y方向JavaScript中的window.devicePixelRatio来获取设备中的像素比值。举个栗子？•以iPhone6为例：iPhone6的设备像素是375×667这个可以认为是iPhone6的逻辑像素，iPhone6是2倍屏那根据dpr公式可以知道iPhone6的物理像素是：750×1334普通屏幕vsRetina屏幕普通屏幕的物理像素点：Retina屏幕的物理像素点：在不同的屏幕上(普通屏幕vsretina屏幕)，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分成了三种：layoutviewportvisualviewportidealviewportlayoutviewport首先，移动设备上的浏览器认为自己必须能让所有的网站都正常显示，即使是那些不是为移动设备设计的网站。但如果以浏览器的可视区域作为viewport的话，因为移动设备的屏幕都不是很宽，所以那些为桌面浏览器设计的网站放到移动设备上显示时，必然会因为移动设备的viewport太窄，而挤作一团，甚至布局什么的都会乱掉。如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。ppk把这个浏览器默认的viewport叫做layoutviewport。visualviewportlayoutviewport的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表浏览器可视区域的大小，ppk把这个viewport叫做visualviewport。layoutviewport的宽度获取：document.documentElement.clientWidthvisualviewport的宽度获取：window.innerWidthidealviewport因为现在越来越多的网站都会为移动设备进行单独的设计，所以必须还要有一个能完美适配移动设备的viewport。所谓的完美适配指的是，首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。当然，不只是文字，其他元素像图片什么的也是这个道理。PPK把这个viewport叫做idealviewport，也就是第三个viewport——移动设备的理想viewport。idealviewport并没有一个固定的尺寸，不同的设备拥有有不同的idealviewport。所有的iphone的idealviewport宽度都是320px，无论它的屏幕宽度是320还是640，也就是说，在iphone中，css中的320px就代表iphone屏幕的宽度。利用meta标签对viewport进行控制metaviewport标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对metaviewport的支持，事实也证明这个东西还是非常有用的。解释：这个meta标签的作用就是得到idealviewport,把默认的layoutviewport的宽度设为移动设备的屏幕宽度，禁止用户进行缩放。rem布局方案什么是rem？rem（fontsizeoftherootelement）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（fontsizeoftheelement）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。解释代码可继续研讨的问题多种成熟的屏幕适配方案（比如阿里的flexible）01移动端下1px问题02系统字体缩放带来的布局错乱03