1.rem和em的概念
rem（font size of the root element）是指相对于根元素的字体大小的单位。rem能等比例适配所有屏幕。
em（font size of the element）是指相对于父元素的字体大小的单位。
2.媒体查询结合rem适配不同屏幕页面：
html {
font-size : 20px;
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}
3.不同分辨率下的媒体查询：
@media screen and(min-width: 320px)and(max-width: 359px){
html{
font-size: 12.8px;
}
}
@media screen and(min-width: 360px)and(max-width: 374px){
html{
font-size: 14.4px;
}
}
@media screen and(min-width: 375px)and(max-width: 385px){
html{
font-size: 15px;
}
}
@media screen and(min-width: 386px)and(max-width: 392px) {
html {
font-size: 15.44px;
}
}
@media screen and(min-width: 393px)and(max-width: 400px){
html{
font-size: 16px;
}
}
@media screen and(min-width: 401px)and(max-width: 414px){
html{
font-size: 16.48px;
}
}
@media screen and(min-width: 750px)and(max-width: 799px){
html{
font-size: 30.72px;
}
}
4.示例代码：
5.vh与vw
body {
height: 100vh;
width: 100vw;
}
vh:
vh就是当前屏幕可见高度的1%，也就是说
height:100vh == height:100%;
但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，
但是设置height:100vh，该元素会被撑开屏幕高度一致。
vw:
vw就是当前屏幕宽度的1%
补充一句，当设置width:100%，被设置元素的宽度是按照父元素的宽度来设置，
但是100vw是相对于屏幕可见宽度来设置的，所以会出现50vw 比50%大的情况
6.自适应
第一种:页面中的宽度都用百分比来做。
-
页面中盒子的高度不能设固定高度。开始学DIV+CSS布局的时候我给每个盒子都设置了固定的宽和高，这样页面做起来非常快，只需要先把页面整体的布局结构搞定，再往里面丢内容就行了，但是后来发现这样的结构是错误的，调整浏览器的宽度里面的内容可能会冲破盒子。正确的思路是高度由内容去撑起来，不管你如何去缩小，内容都不会跑出盒子。
-
百分比是按照父元素的宽度来计算的，包括margin 和padding的值，也是除以父元素的宽度，水平方向的单位都需要设置成百分比。
-
然后字体的大小最好使用rem单位来设置，需要给根元素设置一个字体大小，比如html.body{font-size:10px}，则1rem的大小为10px，方便在不同的屏幕尺寸来调整页面整体文本的大小。
-
使用媒体查询来根据不同的屏幕尺寸来应用不同的样式
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
需要注意的是图片的宽度要设置成百分比，高度不需要设置，这样缩小屏幕时，图片自动的等比例缩小和放大。
第二种：页面所有的尺寸用rem单位来设置
需要给页面添加以下代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
2<meta name="format-dection" content="telephone=no"/>
3<script type="text/javascript">
!function(a){function b(){var b=a.document,c=b.documentElement,d=c.getBoundingClientRect().width;document.documentElement.style.fontSize=20*(d/360)+"px"}window.addEventListener("DOMContentLoaded",function(){b()},!1),window.addEventListener("resize",function(){b()}),b()}(window);
</script>
第一行代码的作用是禁止让用户缩放页面。
然后给根元素设置字体大小为20px。html,body{font-size:20px},后面页面中所有的尺寸按照PSD上面量出来后除以40转换成rem单位的数值，注意是任何尺寸都要需要去除以40，这比第一种设置百分比按照父元素的宽度去计算方便很多。
-
图片需要设置宽和高，PSD量出来后除以40，少一个都不行，只设置一个图片会被拉变形。
-
做手机端页面时，清除margin和padding 用*可能清除不掉，需要加上标签名字去清除。
-
其他的按照正常的去做。
-
7.适配大屏
@media screen and (min-width: 4000px){
html,body {
font-size: 55px!important;
}
}
@media screen and (max-width: 4000px) and (min-width:2500px){
html,body {
font-size: 40px!important;
}
}
@media screen and (max-width: 2500px){
html,body {
font-size: 20px!important;
}
}
css片段：(大屏常用百分比布局处理)
.mainNo5 .main5Up{
width: 100%;
height: 45%;
}
.mainNo5 .main5Down{
width: 100%;
height: 55%;
}
.main5Up .upTitle{
height: 56px;
width: 100%;
border-radius: 12px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
background: rgba(37,19,171,0.87);
line-height: 56px;
font-size: 30px;
color:#fff;
padding-left: 15px;
}
.main5Down .personTabBox{
margin-left: 110px;
}
.main5Down .personTabBox span{
font-size: 30px;
color:rgb(0,145,255);
display: inline-block;
width: 150px;
height: 50px;
line-height: 50px;
text-align: center;
}
.main5Down .personTabBox span:hover{
cursor: pointer;
}
.main5Down .personTabBox span.active{
color:rgb(231,233,41);
}
.main5Down .down_chart{
margin-left: 60px;
width: calc(100% - 60px);
height: calc(100% - 50px);
position: relative;
}
.main5Down .down_chart .leftTop{
position: absolute;
left: 0;
top: 0;
width: 34.4px;
height: 37.6px;
background: url('../img/homepage/border2/5_03.png') no-repeat;
background-size: cover;
}
.main5Down .down_chart .rightTop{
position: absolute;
right: 0;
width: 98.4px;
height: 113.6px;
background: url('../img/homepage/border2/5_06.png') no-repeat;
background-size: cover;
}
.main5Down .down_chart .leftBottom{
position: absolute;
left: 0;
bottom: 25px;
width: 34.4px;
height: 37.6px;
background: url('../img/homepage/border2/5_03.png') no-repeat;
background-size: cover;
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
}
.main5Down .down_chart .rightBottom{
position: absolute;
right: 0;
bottom: 25px;
width: 98.4px;
height: 113.6px;
background: url('../img/homepage/border2/5_06.png') no-repeat;
background-size: cover;
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
}
.main5Down .down_chart .left_line{
position: absolute;
width: 34.4px;
top: 34.4px;
height: calc(100% - 68.8px);
background: url('../img/homepage/border2/5_08.png');
background-size: contain;
}
.main5Down .down_chart .top_line{
position: absolute;
left: 34.4px;
width: calc(100% - 132.8px);
height: 37.6px;
background: url('../img/homepage/border2/5_04.png');
background-size: contain;
}
.main5Down .down_chart .right_line{
position: absolute;
right: 0;
top: 113.6px;
width: 98.4px;
height: calc(100% - 227.2px);
background: url('../img/homepage/border2/5_11.png');
background-size: contain;
}
.main5Down .down_chart .bottom_line{
position: absolute;
left: 34.4px;
bottom: 25px;
width: calc(100% - 132.8px);
height: 37.6px;
background: url('../img/homepage/border2/5_04.png');
background-size: contain;
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
}
.main5Down .down_chart .center{
position: absolute;
top: 37.6px;
left: 34.4px;
width: calc(100% - 132.8px);
height: calc(100% - 98px);
background: url('../img/homepage/border2/12_03.png');
background-size: contain;
}
.main5Down .down_chart .pic{
position: absolute;
width: 120px;
height: 120px;
top: -60px;
left: -60px;
background: url('../img/homepage/theme_grid/right00.png');
background-size: contain;
}
.main5Down .tableBox{
width: 100%;
height: 100%;
}
.main5Down .table{
position: absolute;
top: 37.6px;
left: 34.4px;
width: calc(100% - 132.8px);
height: calc(100% - 98px);
z-index: 999;
}