媒体查询没有采用离子项目(Media queries not taking with ionic project)

媒体查询没有采用离子项目(Media queries not taking with ionic project)

我正在使用电影数据库中的api开展一个Ionic项目

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

它试图通过媒体查询解决这个问题，但是如果我进行了更改，那么网格也会针对iPhone 5和iPhone 6Plus进行更改。

我的问题是如何调整iPhone 6的布局而不会弄乱iPhone 5和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; } } */

I am working on a Ionic project with the api from The Movie Database

As you can see from the image I have a grid of poster covers. On the iPhone 5 (tweaked it with css) and iPhone 6Plus you can see that the grid is center. But on the iPhone 6 its a little off.

It tried to fix this with media queries but if I make a change then the grid changes also for the iPhone 5 & iPhone 6Plus.

My question is how to just adjusted the layout for the iPhone 6 without messing the layout for the iPhone 5 & iPhone 6Plus.

Part of my HTML code:

<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>

Part of my CSS code:

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

最满意答案

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

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

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

May I suggest using media queries with the width between iPhone 5 and iPhone 6Plus:

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

This will change whatever your css is between this values. When the browser is between 413px and 321px wide, the within the media queries will be applied.