111111

相对单位之vw与vh

视口
在PC端，视口指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport(布同优口)

区别
1.百分比是基于【父元素】的宽度/高度的百分比, vw, vh是根据视窗的宽度/高度的百分比。2.在百分比与vw获取的都是页面宽高时，视口单位优势在于【vh】能够直接获取高度，而用%在没有设置body高度情况下，是无法正确获得可视区域的高度。
3.当页面有滚动条时,在百分比与vw获取的都是相同宽高时,100%是不包含滚动条的,100w是包含滚动条的宽度/高度。

相对单位之em与rem

rem
rem是font size of the rootelement的简称，是指相对于根元素的字体大小的单位。

在根元素的font-size属性中指定时,rem单位是指属性的初始值
这意味着1rem等于html元素的字体大小
(对于大多数浏览器而言，其默认值为16px)

-媒体查询语法

@media not screen and (max-width:1200px) and (min-width:600px){
p{
border: solid 3px #0oo;
}
}

media="(orientation : portrait)">
media="dorientation : landscape">

p{
width: 200px;
height: 200px;
background:skyblue;
}
@media (max-width: 800px){
p{
width: 500px;
height: 500px;
background: pink;
)
3