em：一个 M 的宽度（面试：一个字的宽度）
rem：root em 根元素（ <html>）的 font-size //oppo个别机型不适用
vh：view height，视口高度 100vh === 视口高度
vw：view width，视口宽度 100vw === 视口宽度
浏览器默认 font-size:16px
Chrome浏览器默认最小字号为12px：font-size:12px
所以一般情况下，rem 的font-size不要小于12px
rem 就是 <html>元素的 font-size，默认为 16px(浏览器默认font-size)
rem和em 的区别：
1.meta viewport
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
2.媒体查询
更具查询结果选择不同的css样式,设置屏幕最大宽度，如果页面范围在这个宽度内就可以显示对应的CSS，以最大500为例
<style>
@media (max-width: 500px) {
......
}
</style>
3.动态 rem方案
一切单位以屏幕宽度为标准，就能完美还原设计稿。
动态REM思路：动态rem 采用整体缩放的思想，在页面渲染之前，使用JS获取设备宽度并设置rem(1rem == html font-size == viewport width)，之后的布局单位全部使用rem来实现整体缩放。
在使用动态 rem 布局的移动端页面中，很小的宽度如border-width 依然使用px，因为即使使用rem，当rem小于1px 时，依然会被浏览器当做1px 使用。
1、在不同分辨率下，页面布局存在不同程度的差异，特别是页面上的表单控件，其宽度默认是固定值width:150px，当分辨率较高时，表格中的空白显得过多，页面布局显得很不协调，在宽屏显示器上尤为明显。
2、内容区采用媒体查询+定宽，在达到某个断点之后更改内容区的宽度，并把某个内容显示/隐藏。 注意热门市场这里，虽然每一个方块的宽度是随着断点变化的，但是左上角的标签和里面长方形的白色区域在所有的屏幕下都是定宽度的，但是也可以完美的适应不同的屏幕。
3、然后在css中 有关margin和padding属性直接用百分比来表示 页面布局的时候都是通过百分比来定义宽度，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，这就是流式布局的最致命的缺点，往往只有几个尺寸的手机下看到的效果是令人满意的。
4、一番辛苦做出来的网页，在全屏状态下浏览一切正常。但在改变浏览窗口大小之后，网页就变得不堪入目，这是个很值得注意的问题。 问题的根源还得从网页的布局说起，在DW中，网页内容的定位一般是通过表格来实现的，解决表格的问题也就成功了大半。
5、在它里面嵌入了另外一个表格，表格宽度占表格单元的50%，则这个表格的宽度为300，上面说过rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。
6、浏览器的功能设置中，有一个可以自由设置窗口内容字体大小的功能，这样由于不同访问者的设置习惯不同，呈现在他们面前的网页有时也会不不相同。比如你可能本来设计时用的是2号字体，结果由于用户对浏览器的额外设定，变的更大了
有三种：1.一张很大的图，宽达到1920左右，常见的显示器它都能覆盖，你再换大点的显示器分辨率会发现周围露出来了，并不是真的全屏。
2.css3背景可以缩放，这个属性：background-size；
低版本ie不支持背景缩放的，要兼顾低版本ie的话就不是背景图了，直接img插入图片，然后用js取屏幕大小把值赋给图片的宽高，让图片始终等于窗口大小，然后把图片绝对定位后加z-index: -99999让其他东西都叠在这个图上面，看上去像背景。
方法2的缺点是当浏览者分辨率很大时，图片会拉模糊。
3.h5的画布或svg矢量图，可拉到任意大，真正全屏，写几段js控制里面元素还可以有炫目的动画，缺点是太卡通，不适合表现真实质感的地方。
