利用css媒体查询media,兼容pc和手机两个平台 css也能写出自适应页面

有时候,对平台要求比较低,利用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。

赞(0) 打赏
未经允许不得转载:版权所有@七娃设计室七娃博客 » 利用css媒体查询media,兼容pc和手机两个平台
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

七娃设计,让设计贴近生活

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏