pc端rem适配_rem布局

1 em、rem、meta标签的基本概念em 是一个布局的长度单位，当前对象内文本的字体大小的相对单位，也就是说相对于当前元素的font-size。rem 是（根）字体大小相对单位，也就是说跟当前元素的font-size没有关系，而是跟整个body的font-size有关系。
物理像素是硬件的一个实际像素；而逻辑像素是我们在网页设计中使用的像素。它跟物理像素的关系是有一个设备像素比的关系，比如说设备像素比是2，那么就说明一个逻辑像素对应着4个物理像素，它们是一个平方的关系。meta标签，我们可以指定浏览器的适口，适口就是可以看见的区域。然后它有三个需要了解的概念，分别是：
layout viewport 浏览器的默认适口，也就是clientWidth，在PC端如果把浏览器最大化的时候我们可以发现clientWidth与innerWidth是相同的，但是在移动端是不一样的；它是移动设备默认的viewport。
visual viewport 浏览器的可视区域大小，在手机浏览器中的innerWidth是小于clientWidth，在PC端最大化的时候两者是一样的，但是在手机端最大化是两者是不一样的。
ideal viewport 是一个理想化的适口viewport。这个概念更多的取决于具体的需求，比如说在2倍的环境下开发和当前的尺寸下开发那么它的ideal viewport是不一样的。这里面有一个概念叫initial-scale 缩放比例，它是layout viewport相对于ideal viewport 的缩放比例。更准确的说ideal viewport是由layout viewport和initial-scale 缩放比例决定的。