。容器没有回应媒体查询的iPad

我已经做了相当多的研究，但一直没有成功解决这个问题。我正在使用响应式网格的lessframework.css来处理响应式网站。它不适合捕捉768像素和1024像素之间的任何平板电脑。当我检查该屏幕尺寸的元素时，看起来.container并未在这些尺寸之间调整大小。但是，我没有看到我的CSS中的任何地方，这是指定为特定的px大小，因此覆盖它。我从以前的开发者那里选择了这个项目，并且我对新的响应代码很陌生。任何可以给予的帮助将是一个巨大的帮助。谢谢！。容器没有回应媒体查询的iPad

网站是www.mereo.co

下面的代码从lessframework.css电网的样本：

/* Default 8-column layout 
    60 px columns, 24 px gutters, 60 px margins, 768 px total 
    --------------------------------------------------------- 
    1  2  3  4  5  6  7  8  
    60px 144px 228px 312px 396px 480px 564px 648px */ 

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
/* Styles */ 
} 


#if-logged-in { 
    position: relative; 
    width: 100%; 
    height: 24px; 
    line-height: 24px; 
    background: #000; 
    color: #aaa; 
    font-size: 10px; 
    z-index: 1000; 
} 
    #if-logged-in .container { 
     padding-top: 0; 
     padding-bottom: 0; 
    } 
    #if-logged-in p { 
     margin: 0; 
    } 
    #if-logged-in a:link, 
    #if-logged-in a:visited { 
     color: #fff; 
     text-decoration: none; 
    } 
    #if-logged-in a:hover { 
     text-decoration: underline; 
    } 
    #if-logged-in a:active { 
     text-decoration: underline; 
     margin-bottom: -1px; 
    } 


.container { 
    /*padding: 0 60px;*/ 
    width: 768px; 
    margin: 0 auto; 
    overflow: hidden; 
} 
    #header-image { 
     padding: 0; 
     overflow: hidden; 
    } 
     /* HEADER IMAGE 
      full size - 1068x300 
      8 column layout resized to 890x250 displayed at 648x250 
      5 column layout resized to 534x150 displayed at 396x150 
      3 column layout resized to 365x100 displayed at 228x100 
     */ 
     #header-image img { 
      width: 890px; 
      height: 250px; 
      margin-left: -121px; 
      padding: 0; 
     } 
    #content { 
     width: 356px; /* 5 columns */ 
     margin: 0; 
     padding: 20px; 
     overflow: hidden; 
    } 
    #sidebar { 
     width: 184px; /* 3 columns */ 
     margin: 0; 
     padding: 20px; 
     overflow: hidden; 
    } 

::selection { 
    background: #c6d8cd; 
} 
::-moz-selection { 
    background: #c6d8cd; 
} 
img::selection { 
    background: transparent; 
} 
img::-moz-selection { 
    background: transparent; 
}

来源

2013-07-07 user2558809

的.container { }风格具体到iPad的尺寸和分辨率应该是媒体里面查询你在那里。因此，如果容器应宽400像素，在iPad上，那么你的代码应该是：

/* iPad 1 & 2 (landscape) */ 
@media (device-width: 1024px) and (device-height: 768px) and (orientation: landscape) { 
    .container { 
     width: 400px; 
     /* all other .container styles specific to the iPad 2 in landscape should go here */ 
    } 
    #if-logged-in { 
     /* other styles go in their respective selector in the media query */ 
    } 
}

不要忘记，有一个iPad没有Retina显示屏，以及一个带这意味着，如果您有任何背景图片或从CSS加载的svg图像，这些图像应设置为指向2倍分辨率的资产，以在视网膜iPad媒体查询内的视网膜iPad上看起来不错。

来源

2013-07-07 21:06:55

。容器没有回应媒体查询的iPad

回答

相关问题