1，移动适配的概念和原理

物理像素 ：就是移动设备显示器的最小的显示单位

独立设备像素 ：计算机坐标系统虚拟的像素，是由程序员进行控制的像素。

像素比 ： 物理像素/设备独立像素

所以我们在设置缩放时，如果虚拟像素是1px，而像素比是3，那么就需要把缩放为1/3。像素比为3就是说物理像素是设备独立像素的3倍，就是物理像素的3个像素来表现为一个设备独立像素的1个像素。所以需要缩放1/3倍才能(1:1)和屏幕的大小刚好。

2，rem的问题

请注意接下来的解释和算法的值都是针对同一个值进行操作的，否则可能不明白为什么是这么算。

rem是根的fontsizes设置的大小。 例如：html.style.fontSize=750/25;我们可以算出html的fontSize是30px；那么1rem就等于30px;

• 那么我们如何用这个rem去表示每个像素呢?

例如：上面我们已经算出了1rem为30px，所以如果div的高度为90px，90/30rem=3rem（90除以30等于3加上单位rem），所以这个高度用3rem来表示是完全可以的。所以像素转换成rem，除以30就可以。

• 那么如果设备宽度不一样，得出的rem的值不一样，则高度除以的数是否需要变化？例如高度90px则除以30得出3rem，问题是这个30是根据设备的宽度算出的，不同设备宽度不一样，那算出的值就不是30了，如何处理呢？

例如：如果设备的宽度是1000px，1000除以25得出的结果是40。那么90px/30rem=3rem。其实1rem是40，这样实际的高度就变成了40*3=120px。 其实是这样的，但是这样并不影响布局。举个栗子: 我们先前说到高度为90px的，当前的rem值是30px，所以div的高度可以是90除以30得出3rem来表示。同时这个90px的div里面还有一个高度为60px的子div。那么它由2rem来表示。

如果设备变成了1000xp，则rem值变成了40px。则原先由3rem来表示90px的高度变成了120px，同时60px的子div变成了80px。

因此得出结论：

随着设备的高度变大，我们布局的高度也会变大。但是整体的布局并没有变化。如：rem为30px时，父高度90px和子高度60px两个高度比例3：2。rem为40时，父高度是120px，子高度是80px，比例依然是3比2.其实布局是没有变化的。

其实这就是响应式，根据rem的值不同而使页面放大或者缩小，但是整体的布局是不发生变化的。

所以对于上述的担心，完全没有必要，我们只要以某一个设备的rem布局好，则在其他设备上都是正常布局的。这就是牛B的响应式。