分类移动端开发基本观点像素基础知识Viewport原理分析弹性布局响应式设计1Rem移动端事件应用Zepto库的使用移动端开发基本观点意义移动用户使用->市场需求->市场供给->企业需要移动开发人才->工资高，就业容易->一大波程序员涌现->猴年薪资将下降->新技术层出不穷，VR/AI->市场需求上升->原路返回……扯远了，以上就是学习移动开发的大致动机；对移动开发的理解移动开发和移动开发是一样的吗？？不不不……移动端是个大类。小阳认为应该包括智能手机、平板电脑等移动设备，主要是这两个；移动端开发入门学习路径目录是像素基础知识。抛出3个概念，px（CSSpixels）：虚拟像素，可以理解为“直观”的像素，我希望这个元素的宽高都是10px；dp(devicepixels)：设备像素（物理像素），可以理解为实际像素，在设备中实际用了多少个物理像素来表示这个宽度为10px的元素；dpr（devicepixelsratio）：设备像素比，公式为1px=(dpr)^2*1dp，可以理解为1px中有多少像素由设备像素组成；三个概念的综合理解就是：我把一个元素的宽高设置为10px，那么在显示设备中实际用多少设备像素来表示呢？如果dpr=2，则1px由4个设备像素显示。如果是10px，那么显示设备实际用40dp来显示10px；dpr=1，则1px按1个设备像素显示；px和dp之间的区别是直觉我认为实际使用的只有10px和40dp；为什么会出现dpr>=2的情况？dpr=1不是更符合我的认知和理解吗？并不是因为人们追求更高的分辨率，分辨率越高图像越清晰！！！;但是Mac的Retina屏幕和一般PC一样大，但是图像清晰多了，补肾？由于dpr>=2!！！其他牌子的机器老老实实是1px=1dp，而Mac是1px=4dp，所以你直观的认为大家都用相同的像素数来表示图像（这是真的），但Mac其实用了两倍（指的是dpr的设备像素显示图像）；在实际应用中，显示设备不会直接给你一个px和dpr你实际看到的是下面的参数。以下是Kidney6Plus的显示参数信息：多抛几个概念，别晕……英寸：这里指的是屏幕主对角线的尺寸，1英寸=2.54cm，5.5英寸大约是等于14cm(13.97cm)Resolution:1920*1080pixels,这里指的是物理像素(devicepixels)ppi(pixelsperinch):pixelsperinch,这里Kidney6Plus是每英寸有401个像素，那么ppi是怎么计算的？顾名思义，每英寸像素（设备像素），已知屏幕分辨率和主对角线的大小，则ppi等于varhypotenusesize=V(1920^2+1080^2)V代表平方根varppi=Hypotenusesize/5.5ppi=401ppi现在我们知道ppi越高，每英寸的像素越多，图像越清晰；和前面的知识点有什么关系？毕竟这些参数是老外最先发明的，他们会优先选择自己熟悉的计量单位作为显示设备的出厂标准参数，所以ppi作为显示设备的行业标准；告诉业内人士，ppi达到多少就是高清屏。对应的dpr是多少，而不是直接告诉你我现在显示设备的dpr是多少？毕竟，当人们直接听到像素分辨率时，他们会更加敏感。以下为不同ppi对应的dpi：注]Retina屏为dpr>=2的高清屏，Kidney6Plus的dpr为3，为超高清屏；至此，我们了解到：给你一台分辨率为1920*1080，尺寸为5.5英寸的显示设备，可以计算出它的ppi=401，根据ppi计算它的dpr=3，所以设备1px=(3^2)dp，其虚拟像素为1920/3=660px，1080/3=px，即虚拟分辨率为360*660；这时候如果你在代码中设置元素的宽高为360*660，你会发现它的实际尺寸与肾6Plus的屏幕尺寸相等；[ppi]viewport原理分析一个有趣的现象是，当你在chrome中使用上面的设备模拟方法时，它模拟的是Kidney6Plus，这时候神奇的事情发生了。这个元素设置的宽高很明显就是手机的宽高。按照常理，它应该占据整个屏幕，但实际上是：这是怎么回事？，如何解决这个问题呢？好吧，作为实用主义者（不是我），我先说说解决方案：meta标签中有一个viewport属性，可以为这个属性设置宽度；Kidney6Plus默认宽度为980px，所以元素宽度为360px，实际显示尺寸为360px*360/980=132.24px（不信可以自己测试);现在只要把viewport的宽度设置为360px，那么元素就可以占满整个屏幕了。下面我们再介绍一个概念：viewportviewport的原理是：先把页面渲染到一个viewport上，这个viewport的宽度是默认的尺寸显示设备，例如Kidney6Plus为980px；然后将视口按比例缩放到整个手机屏幕；例如在上面的例子中，元素的宽和高是360*600px，元素先渲染在宽度为980px的viewport上，然后在整个手机屏幕上按比例缩放；视口是连接手机屏幕和页面的中间层，为什么不需要呢？？想象一下，如果没有中间层，一个宽度为980px的页面直接缩放到320px，那么里面的DOM节点会被重新绘制，这可能会造成布局混乱；viewport的作用是先将所有DOM节点绘制在宽度为980px的viewport上，统一缩放整个viewport，以保证排版的正确性；关于viewport，涉及到两个概念：layoutviewport：布局视口，可以理解为放置页面的窗帘visualvewport：windowviewport，可以理解为屏幕的窗口。例如：Kidney6Plus的视觉视口宽度为360px，布局视口为980px；360px是屏幕窗口的虚拟像素，980px是放置页面的像素；回顾一下，前面的元素出现缩放现象：根据Kidney6Plus1920*1080和5.5英寸屏幕的物理分辨率，ppi=401->dpr=3->虚拟分辨率为640*360像素;绘制一个宽度为360px的元素，本应填满整个手机屏幕，但是由于视口的作用->将360px的元素绘制在980px的布局视口上，然后按比例缩放to360px在视觉视口上->最后看到的是360px的元素无法填满整个屏幕；之前的一个方案是改变布局视口，即
