响应式布局

viewport:初始化页面元素，防止页面被缩放，规范用户操作

百分比分局：宽高百分比相对于父元素的宽高

                      margin和padding的百分比相对于父元素的宽度

                      定位的百分比相对于它的参照物

媒体查询：在不同的屏幕大小下定制样式

                   @media screen and(min-width:宽度){样式}：大于某个值时的样式

                   @media screen and(max-width:宽度){样式}：小于某个值时的样式

                   @media screen and(min-width) and (max-width){样式}：在最大和最小内的样式

                   @media not screen and(min-width) and (max-width){样式}：除某个范围内的样式

                   可以使用link引入外部文件 link和media属性中写媒体查询

em和rem: em:相对于最近的父元素的font-size的大大小

                 rem:相对于html的字体大小

vw和vh： 相对于可视窗口的大小