有时候，对平台要求比较低，利用bootstrap等响应式做兼容总觉得大材小用，而且导致加载缓慢，就没有必要再引入一个完整的插件库，对于这样的情况，就可以选择用原始的css兼容的方式，只针对pc和手机2个平台进行兼容处理，分别写两套css即可。

核心代码：

 <style>
 .wap{display: none;}
 @media screen and (max-width:768px){
    .wrap{display: none;}
    .wap{display: block;}
 }
 </style>

wap是手机端的的css最外的盒子；wrap是pc端对外的盒子；@media screen and (max-width:768px)的意思是当屏幕的分辨率低于768px的时候css生效，这个媒体外部的全部css不生效；

因此，当设备分辨率为手机，媒体里面的手机端的css自动生效，当分辨率大于768px时，css就自动渲染外部的css。