响应式布局

相对单位vw与vh

视口：浏览器可视区域
十分之一：

.con1{
width: 10vw;
height:10vh;
background:skyblue;

vmin：vw和vh中小的那一个
vmax相反

vw这个单位永远相当于视口宽度（viewport width)
100vw=一个视口宽度 1vw=1%视口宽度
375px（设计图像素）=100vw
1p× = 0.2666666666666667vw
创建一个48p××35p×大小的元素
35px = 9.333333333333333vw
48px = 12.8vw
区别：
1.百分比是基于【父元素】的宽度/高度的百分比，vw，vh是根据视窗的宽度/高度的百分比。
2.在百分比与vw获取的都是页面宽高时，视口单位优势在于【vh】能够直接获取高度，而用%在
没有设置body高度情况下，是无法正确获得可视区域的高度。
3.当页面有滚动条时，在百分比与vw获取的都是相同宽高时，100%是不包含滚动条的，100vw是
包含滚动条的宽度/高度。

em和rem

em：
em是font size of the element
的简称，是指相对于父元素的字体大小的单位。
em单位的主要问题是它们与元素的字体大小有关。因此，它们可能会层叠起来并导致意想不到的结果。

rem:只根据根元素，不会受到父元素影响
rem是font size of the rootelement的简称，是指相对于根元素的字体大小的单位。在根元素的font-size属性中指定时，rem单位是指
属性的这意味着1rem等于html元素的字体大小（对于大多数浏览器而言，其默认值为16px）。

媒体查询语法

@media (max-width:700px) {
p{
border: solid 3px#000;}
}