尺寸单位

一、em 和 rem

em 和 rem都是灵活、 可扩展的单位，由浏览器转换为像素值，具体取决于您的设计中的字体大小设置。 如果你使用值 1em 或 1rem，它可以被浏览器翻译成 从16px到 160px 或其他任意值。

1.em

        根据元素的字体大小设置尺寸；

2.rem

        根据根元素(html)字体大小设置尺寸；

浏览器的默认字体大小是16px(但不是所有的浏览器都是16px), 而且浏览器的默认字体大小都是可以改变的;

二、尺寸单位 - em与像素的转换关

        当使用em单位时，像素值将是em值乘以使用em单位的元素的字体大小

在很多资料中都说em是根据父级元素的字体大小进行设置，其实根据w3c的约定，em大小是根据设置了em单位元素的大小进行设置。为什么会有以上说法是应为css的继承特性导致，子级元素继承了父级的font-size属性，所以设置em时说是根据父级的字体大小进行设置。

三、尺寸单位 - em与像素的转换关系

                注意：特别要注意em的继承问题。

四、尺寸单位 - rem与像素的转换关

rem单位的大小永远都会根据根元素(html)的字体大小进行设置；

五、尺寸单位 - rem与em的区别

         rem 单位翻译为像素值是由 html 元素的字体大小决定的。 此字体大小会被浏览器中       默认字体大小的设置影响，除非显式重写一个具体单位

       em 单位转为像素值，取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。

六、什么时候使用em?

            1.  em 单位的主要目的应该是允许保持在一个特定的设计元素范围内的可扩展性(例如组件，可以改变大小的组件)。（备课案例）

             2.  使用em 值设置导航菜单项的padding、 margin，line-height等值，目的适配不同屏幕大小下导航跟随变化；（完成作业）

以上情况绝对不是一定使用em, 一定要根据你自己的真实情况去设计项目，做项目之前一定要先想想，这么做是不是你最预期的情况;

注意：因为em的继承特性，特别容易导致无法预期的问题出现，所以使用em时，一定要细心在细心。

七、什么时候使用rem?

当你设计的项目需要适配不同屏幕大小的时候，那么rem就排上了用场，这几乎在一个标准的设计中占据了一切，包括heights，widths，padding，margin，border，font-size，shadows，几乎包括你布局的每部分。简单地说，一切可扩展都应该使用 rem 单位。

注意：对于border、shadows等比较固定的属性，最好还是使用px。

八、尺寸单位

            vw 和 vh

                vh and vw：

                相对于视口的高度和宽度，而不是父元素的（CSS百分比是相    对于包含它的最近的父元素的高度和宽度）

        1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度

例如：

        浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5     px，1vw = 1920px/100 =19.2 px。

九、尺寸单位

        视口概念：

                在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。 视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。浏览器的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

十、尺寸单位

        vmax 和 vmin

                vmax and vmin：

                        相对于视口的最大|最小长度。     vmax会一直按照视口的最长方向为参考 (处理横竖屏问题) ;vmin    同理；