移动端rem布局原理 rem是什么单位？

rem是什么单位？Rem是一个相对单位，相对于根元素的字体大小。我们只需要指定根元素作为参考值。主要用于屏幕适配布局，移动终端应用广泛。这样，通过根据不同的屏幕设置不同的根元素，系统可以适应不同的屏幕

rem是什么单位？

Rem是一个相对单位，相对于根元素的字体大小。我们只需要指定根元素作为参考值。主要用于屏幕适配布局，移动终端应用广泛。这样，通过根据不同的屏幕设置不同的根元素，系统可以适应不同的屏幕。

为什么很多web项目还是使用px，而不是rem？

在移动终端刚刚流行的早期，为了使手机页面适应不同大小的手机屏幕，淘宝网的一位前端老板写了一个经过改编的JS，叫做flexible，可以在GitHub找到。原理很简单。似乎根据手机的分辨率和DPI（我不记得了），动态设置根元素HTML的fontsize，然后页面元素的大小就是rem，因为1rem=fontsizeofhtml。

后来，出现了大众和VH。渐渐地，许多项目使用大众汽车进行改编。100vw=100%宽度。因为兼容性不是很好，所以一直没有上线。

nodejs出现后，前端工程开始了。有pxtorem和pxtoview port等插件。在开发过程中，我们可以根据UI标记的PX case直接编写它们。在打包时，插件将帮助我们将PX计算转换为REM或VW。

我现在用大众。不考虑兼容性。我甚至不看那些需要与ie兼容的公司。PX是一个固定的像素，不能适应流的布局。通常，高度由Px设置，web应用版本的宽度由rem.2设置。EM是相对于父元素的字体大小单位。因为它是相对于父元素的字体大小单位，所以如果要设置元素的宽度和高度，必须查看其父元素的大小。如果父对象也是EM单位，则必须转到其父对象并逐层计算以获得准确的像素值。

3. REM的出现改变了许多移动终端的适应性，因为REM指的是相对于根元素的字体大小单位。只要HTML根上的字体大小是根据屏幕大小设置的，rem中的元素大小就会相应地改变。

前端开发中px，em，rem这些单位有哪些不同之处？

早期的前端设计非常直观，可以使用Adobe Dreamweaver、Photoshop、fireworks、Flash软件制作漂亮的网页。HTML也不需要太先进的技术，基本上可以使用表格。但随着时间的推移，烟花爆竹和闪光已经基本消除。相反，HTML5、CSS3、JavaScript、jQuery和Ajax是Web前端的核心技术。

现在学习HTML前端设计，我们首先需要掌握的是div和CSS。我们不能再使用以前直观的设计方法，而是使用div和CSS来控制网页的布局。我们还需要了解bootstrap/angularjs的框架。除此之外，交互式网页的设计还需要掌握ASP、PHP等开发语言的知识。一句话，前端开发听起来很简单，但其实要学的东西太多了，太复杂了。

作为HTML前端的初学者，首先，我们应该从最基本的开始。如果我们能通过div和CSS控制网页中的每一个内容，那将会非常有趣。