今天完成的事情：

1、学习怎样用angular给百度富文本编辑器加入非空验证；

2、制作并讲解px、em、rem、%、vw、vh、vm有什么区别的ppt；

明天计划的事情：

1、使用angular给百度富文本编辑器加入非空验证；

2、把添加的数据传到后台服务器；

遇到的问题：

百度富文本编辑器的非空验证；

收获：

px、em、rem、%、vw、vh、vm这些单位有什么区别？

1.背景介绍

传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，并且拥有比较良好的兼容性。但是你知道吗？从css3开始，浏览器对逻辑单位的支持又提升到了另外一个境界，增加了rem、vh、vw、vm等一些新的长度单位，我们可以利用这些新的单位开发出比较良好的自适应页面，随之覆盖多种不同分辨率的终端，包括移动设备等。现在让我们来看下这些长度单位有什么区别。

2.知识剖析

1、px

px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。

兼容性：

2、em

参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

兼容性：

demo1：https://ptteng.github.io/PPT/demo/CSS-03-px,em,rem,%25,vw,vh,vm/demo1.html

3、rem

css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。

兼容性：

demo2：https://ptteng.github.io/PPT/demo/CSS-03-px,em,rem,%25,vw,vh,vm/demo2.html

4、%

一般宽泛的讲是相对于父元素，但是并不是十分准确。

1、对于普通定位元素就是我们理解的父元素

2、对于position: absolute;的元素是相对于已定位的父元素

3、对于position: fixed;的元素是相对于 ViewPort（可视窗口）

兼容性：

%的第三种情况对于字体没有说明的效果，demo使用width来显示

demo3：https://ptteng.github.io/PPT/demo/CSS-03-px,em,rem,%25,vw,vh,vm/demo3.html

5、vw

css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。

举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

兼容性：

demo4：https://ptteng.github.io/PPT/demo/CSS-03-px,em,rem,%25,vw,vh,vm/demo4.html

6、vh

css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。

举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。

兼容性：

demo4：https://ptteng.github.io/PPT/demo/CSS-03-px,em,rem,%25,vw,vh,vm/demo4.html

7、vm

css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm

举个例子：浏览器高度900px，宽度1200px，取最小的浏览器高度， 1 vm = 900px/100 = 9 px。

由于现在vm的兼容性较差，这里就不做展示了。

3.常见问题

问题一：

为什么一开始在css样式中给body设置font-size：62.5%？

问题二：

在谷歌浏览器运行以下代码，1em是显示多大的字体？

css：

 body{

                            font-size: 62.5%;

                        }

                        p{

                            font-size:1em;

                        }

html：

<p>我的字体是多大？</p>

4.解决方案

答案一：

Font-size=62.5%这就使em值变为16px*62.5%=10px。这样1em=10px，1.2em=12px利于我们进行换算。

答案二：

谷歌浏览器强制最小字体为12号，即使设置成 10px 最终都会显示成 12px，当把html的font-size设置成10px,子节点rem的计算还是以12px为基准。

5.编码实战

demo1：https://ptteng.github.io/PPT/demo/CSS-03-px,em,rem,%25,vw,vh,vm/demo1.html

demo2：https://ptteng.github.io/PPT/demo/CSS-03-px,em,rem,%25,vw,vh,vm/demo2.html

demo3：https://ptteng.github.io/PPT/demo/CSS-03-px,em,rem,%25,vw,vh,vm/demo3.html

demo4：https://ptteng.github.io/PPT/demo/CSS-03-px,em,rem,%25,vw,vh,vm/demo4.html

6.扩展思考

css还有哪些长度单位？

in:寸

cm:厘米

mm:毫米

t:point，大约1/72寸

pc:pica，大约6pt，1/6寸

1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

7.参考文献

参考一：你知道这7个css单位么？http://www.xidayun.com/index.php/2016/06/27/rem-vh-vw-vmin-vmax-ex-ch/

参考二：css长度单位测试实例页面http://www.zhangxinxu.com/study/201103/css-length-value-test-demo.html

8.更多讨论

css3的calc()