说起移动端字体，就会想到它的布局方式以及布局单位，那么以下就是几种布局
布局方式
一、静态布局（static layout）
即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。
1、布局特点
不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。
2、设计方法
PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；
移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。
优点：这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。
缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。当前，大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种完全兼容未来网页的制作方法，我们需要一些适应未知设备的方法。
二、流式布局（Liquid Layout），也成百分比布局
流式布局（Liquid）的特点（也叫"Fluid")是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。
网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。
1.布局特点
屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
2.设计方法
使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport)和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width等属性控制尺寸流动范围以免过大或者过小影响阅读。
这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕
三、自适应布局（Adaptive Layout）
自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
1、布局特点
屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
2、设计方法
使用 @media媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。
四、响应式布局（Responsive Layout）
随着CSS3出现了媒体查询技术，又出现了响应式设计的概念。响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用
1.布局特点
每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
2.设计方法
媒体查询+流式布局。通常使用 @media媒体查询和网格系统 (Grid System)配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS给单一网页不同设备返回不同样式的技术统称。
优点：适应pc和移动端，如果足够耐心，效果完美。
缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。
五、弹性布局（rem/em布局）
1. rem/em区别：rem是相对于html元素的font-size大小而言的，而em是相对于其父元素。
2.使用 em或 rem单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，因为em是相对父级元素的原因没有得到推广
3.浏览器的默认字体高度一般为16px，即1em:16px,为了方便计算，因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px
布局单位
原因：
1、因为px在PC端很流行但不适合于移动端，所以专门设计的弹性布局方式，来更好地适用于移动端，所以才会出现rem和em,em
2、物理像素(physical pixel) 我们看到的每个屏幕都是由一颗颗我们肉眼难以看到的小颗粒（物理像素）组成的。
3、逻辑像素 是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。
4、设备的像素比(device pixel ratio)简称DPR 它的数值体现了物理像素和逻辑像素之间的关系，用公式可以计算出该设备的DPR的大小：
DPR = 物理像素 / 逻辑像素
所以这就是在电脑显示的字体为什么和手机显示的字体大小不一致，都是因为DPR的因素
@media screen and (min- 320px) { html {font-size: 14px;} } @media screen and (min- 360px) { html {font-size: 16px;} }
案列
二、这是使用JS动态设置rem来实现移动端字体的大小
