媒体查询没有采用离子项目

Question

我正在使用来自The Movie Database

的api开展Ionic项目

从图像中可以看出，我有一个海报封面网格。在iPhone 5（用css调整）和iPhone 6Plus上你可以看到网格是中心。但在iPhone 6上稍微偏了一点。

它试图通过媒体查询解决这个问题，但是如果我进行了更改，那么iPhone 5＆amp; iPhone 6Plus。

我的问题是如何调整iPhone 6的布局而不会弄乱iPhone 5＆amp;的布局。 iPhone 6Plus。

我的部分HTML代码：

<div class="row responsive-sm responsive-md responsive-lg wrapper-grid">
    <div class="col col-33">
        <div class="">
            <a ng-repeat="trending_movie in trending_movies" href="#/app/trending/{{trending_movie.id}}">
                <img ng-if="trending_movie.poster_path" ng-src="http://image.tmdb.org/t/p/w92/{{trending_movie.poster_path}}" >
                <img ng-if="!trending_movie.poster_path" ng-src="{{default_image}}">
            </a>
        </div>
    </div>
</div>

我的CSS代码的一部分：

/* GRID PAGE */
.wrapper-grid{
  padding-left:15px;
}

/*  MEDIA QUERIES */
/*@media(max-width:750px) and (max-height:1334px){
    .wrapper-grid{
        padding-left:40px !important;
    }
  }
*/

Answer 1

我建议使用iPhone 5和iPhone 6Plus之间宽度的媒体查询：

@media (max-width:413px) and (min-width:321px) {

}

这会改变这些值之间的css。当浏览器的宽度介于413px和321px之间时，将应用媒体查询。