css 响应式布局(媒体查询)，兼容pc，ipad，移动端的布局单位

代码：

.box{
    width:80%;
}
//ipad和手机端，默认pc。
@media screen and (max-width: 62rem){    //62rem对应992px，约等于1000px宽度
    .newBgTitle{
        width:90%;
    }
}
@media screen and (max-width: 48rem){    //48rem对应768px，约等于780px宽度
    .newBgTitle{
        width:100%;
    }
}

如果设计比较复杂的布局，可能必须写两套代码，比如导航菜单，pc的导航是不能在移动端使用的，所以我们可以通过给予通用类，控制是否显示。

是否显示：

//pc和移动
.pc{
    display: block;
}
.yd{
    display: none;
}
@media screen and (max-width:48rem){
    .pc{
        display: none;
    }
    .yd{
        display: block;
    }
}