我正在尝试在Blogspot上实施媒体查询-http://cricketbeta.blogspot.in/

但是他们没有用,请给我看看,告诉我哪里错了

    @media screen and (max-width : 479px) {
/* If screen size less than 479px Load these styles */
/* Done for Smart Phones */
.content{width: 100%!important;}
.sidebar{display: none;}
.container{width:100%;
#topmenu{display: none}
}


@media screen and (min-width: 480px) and (max-width : 768px) {
/* If screen size less than 768px Load these styles */
/* Done for Tablets */
#middle .content{width: 100%!important;}
.sidebar{display: none;}
.container{width:100%;}
.header-bottom{width:100%}
}

@media screen and (min-width: 768px) and (max-width : 1024px) {
/* If screen size less than 960px Load these styles */
/* Done for Tablets */
.content{width: 100%!important;}
.sidebar{width: 100%;}
.container{width:100%;}
.header-bottom{width:100%}
}

最佳答案

我使用的媒体查询如下。看来您可能缺少一些说明符。

苹果手机:


  @仅限媒体屏幕和(最小设备宽度:320像素)
  和(最大设备宽度:480px)和(最大设备高度:480px)和
  (方向:纵向){
  
  }
  
  @media only屏幕和(max-device-width:
  480像素)和(最小设备宽度:320像素)和(最大设备高度:480像素)
  和(orientation:landscape){
  
  }


iPad:


  @media only屏幕和(最小设备宽度:768px)
  和(max-device-width:1024px)和(max-device-height:1024px)和
  (方向:纵向){
  
  }
  
  @media only屏幕和(max-device-width:
  1024像素)和(最小设备宽度:768像素)和(最大设备高度:1024像素)
  和(orientation:landscape){
  
  }

关于css - 媒体查询不适用于Blogspot,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19766351/

10-13 05:19