在前端网页设计过程中，如何让布局随着网页的变化而进行布局，是一个非常有用的技术。本文根据作者的试验来对其进行了一个大致的分析。
px:像素（Pixel）,相对长度单位。像素px是相对于显示器屏幕分辨率而言的。--即分辨率不同的机型当前对应的距离可能发生变化。(1Inches=xPx)。
- 所以相对于同一机型来说是一个绝对的长度单位。
em:是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
- 以其父级元素为基准来变化长度。所以其算法不是一个固定的值。
rem:是CSS3新增的一个相对单位（root em，根em）。
- 那么其好用在用可以直接设置HTML的font-size，然后在其子类都是以这个大小为基准变化的值。
在移动设备上，我们常常设置
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
此方式的目的是为了将当前屏幕(PC)分辨率的px转化成手机端的px，让px在手机上能够兼容此方式。
因此，此时看见的12px与PC端的12px无异。但是，如果不写着个meta的话，那么，浏览器会一直以PC的视图来决定手机端的px的大小，让视图看起来变小了很多。
那么，响应式页面则经常配合媒体查询media 来设置不同分辨率下手机的各种不同的配置机构，然后根据父级来变化所有的相对长度。
感谢这篇博客对作者的启发。
网友评论