适应大分辨率显示屏操作

1、设置html的font-size属性

html{
  font-size : 16px;
}

2、修改其他css的属性单位为rem

rem :相对长度单位。相对于根元素(即html元素)font-size计算值的倍数

当前 font-size 为 16px，所以

px->rem 计算公式为  1px = 1/16 rem 

例如：

.common li {
    clear: left;
    line-height: 0.9375rem;
    height: 1.875rem;
    padding: 0 1rem;
    font-size: 0.875rem;
}

3、都设置完了，可以写媒体查询

在媒体查询前必须确认自己的html页面有以下代码

<meta name="viewport" content="width=device-width, initial-scale=1">

确认完毕后，做需要适配的型号的媒体查询

@media  only screen and (min-width: 2560px){
    html {
        font-size: 30px !important;
    }
}

@media only screen and (min-width: 3840px){
    html {
        font-size: 45px !important;
    }

}
@media only screen and (min-width: 4096px){
    html {
        font-size: 50px !important;
    }

}